fix(VFab, VFooter): avoid error when changing app prop

Author: J-Sek

packages/vuetify/src/components/VFab/VFab.tsx

@@ -9,7 +9,6 @@ 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
@@ -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%'

packages/vuetify/src/components/VFooter/VFooter.tsx

@@ -11,7 +11,6 @@ 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'
@@ -40,7 +39,6 @@ export const VFooter = genericComponent()({
   props: makeVFooterProps(),
 
   setup (props, { slots }) {
-    const layoutItemStyles = ref()
 
     const { themeClasses } = provideTheme(props)
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.color)
@@ -55,20 +53,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(() => (