diff --git a/packages/vuetify/src/components/VFab/VFab.tsx b/packages/vuetify/src/components/VFab/VFab.tsx
index c2a3e6a8e81..4bc2fe835d4 100644
--- a/packages/vuetify/src/components/VFab/VFab.tsx
+++ b/packages/vuetify/src/components/VFab/VFab.tsx
@@ -9,11 +9,10 @@ import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'
 import { makeLocationProps } from '@/composables/location'
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { useResizeObserver } from '@/composables/resizeObserver'
-import { useToggleScope } from '@/composables/toggleScope'
 import { makeTransitionProps, MaybeTransition } from '@/composables/transition'
 
 // Utilities
-import { computed, ref, shallowRef, toRef, watchEffect } from 'vue'
+import { computed, ref, shallowRef, toRef } from 'vue'
 import { genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
@@ -49,7 +48,6 @@ export const VFab = genericComponent()({
   setup (props, { slots }) {
     const model = useProxiedModel(props, 'modelValue')
     const height = shallowRef(56)
-    const layoutItemStyles = ref()
 
     const { resizeRef } = useResizeObserver(entries => {
       if (!entries.length) return
@@ -70,20 +68,14 @@ export const VFab = genericComponent()({
       return props.location?.split(' ')[1] ?? 'end'
     })
 
-    useToggleScope(() => props.app, () => {
-      const layout = useLayoutItem({
-        id: props.name,
-        order: computed(() => parseInt(props.order, 10)),
-        position,
-        layoutSize: computed(() => props.layout ? height.value + 24 : 0),
-        elementSize: computed(() => height.value + 24),
-        active: computed(() => props.app && model.value),
-        absolute: toRef(() => props.absolute),
-      })
-
-      watchEffect(() => {
-        layoutItemStyles.value = layout.layoutItemStyles.value
-      })
+    const { layoutItemStyles } = useLayoutItem({
+      id: props.name,
+      order: computed(() => parseInt(props.order, 10)),
+      position,
+      layoutSize: computed(() => props.layout ? height.value + 24 : 0),
+      elementSize: computed(() => height.value + 24),
+      active: computed(() => props.app && model.value),
+      absolute: toRef(() => props.absolute),
     })
 
     const vFabRef = ref()
@@ -108,7 +100,7 @@ export const VFab = genericComponent()({
           ]}
           style={[
             props.app
-              ? { ...layoutItemStyles.value }
+              ? layoutItemStyles.value
               : {
                 height: props.absolute
                   ? '100%'
diff --git a/packages/vuetify/src/components/VFooter/VFooter.tsx b/packages/vuetify/src/components/VFooter/VFooter.tsx
index f3ca1731d43..765689c090c 100644
--- a/packages/vuetify/src/components/VFooter/VFooter.tsx
+++ b/packages/vuetify/src/components/VFooter/VFooter.tsx
@@ -11,10 +11,9 @@ import { useResizeObserver } from '@/composables/resizeObserver'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
-import { useToggleScope } from '@/composables/toggleScope'
 
 // Utilities
-import { computed, ref, shallowRef, toRef, watchEffect } from 'vue'
+import { computed, shallowRef, toRef } from 'vue'
 import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'
 
 export const makeVFooterProps = propsFactory({
@@ -40,8 +39,6 @@ export const VFooter = genericComponent()({
   props: makeVFooterProps(),
 
   setup (props, { slots }) {
-    const layoutItemStyles = ref()
-
     const { themeClasses } = provideTheme(props)
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.color)
     const { borderClasses } = useBorder(props)
@@ -55,20 +52,14 @@ export const VFooter = genericComponent()({
     })
     const height = computed(() => props.height === 'auto' ? autoHeight.value : parseInt(props.height, 10))
 
-    useToggleScope(() => props.app, () => {
-      const layout = useLayoutItem({
-        id: props.name,
-        order: computed(() => parseInt(props.order, 10)),
-        position: toRef(() => 'bottom'),
-        layoutSize: height,
-        elementSize: computed(() => props.height === 'auto' ? undefined : height.value),
-        active: toRef(() => props.app),
-        absolute: toRef(() => props.absolute),
-      })
-
-      watchEffect(() => {
-        layoutItemStyles.value = layout.layoutItemStyles.value
-      })
+    const { layoutItemStyles } = useLayoutItem({
+      id: props.name,
+      order: computed(() => parseInt(props.order, 10)),
+      position: toRef(() => 'bottom'),
+      layoutSize: height,
+      elementSize: computed(() => props.height === 'auto' ? undefined : height.value),
+      active: toRef(() => props.app),
+      absolute: toRef(() => props.absolute),
     })
 
     useRender(() => (
diff --git a/packages/vuetify/src/composables/layout.ts b/packages/vuetify/src/composables/layout.ts
index 62ce9a919f8..774db40003d 100644
--- a/packages/vuetify/src/composables/layout.ts
+++ b/packages/vuetify/src/composables/layout.ts
@@ -111,7 +111,7 @@ export function useLayoutItem (options: {
 }) {
   const layout = inject(VuetifyLayoutKey)
 
-  if (!layout) throw new Error('[Vuetify] Could not find injected layout')
+  if (!layout && options.active.value) throw new Error('[Vuetify] Could not find injected layout')
 
   const id = options.id ?? `layout-item-${useId()}`
 
@@ -126,7 +126,7 @@ export function useLayoutItem (options: {
   const {
     layoutItemStyles,
     layoutItemScrimStyles,
-  } = layout.register(vm, {
+  } = layout.register(vm, { // TODO: get styles without registering?
     ...options,
     active: computed(() => isKeptAlive.value ? false : options.active.value),
     id,