Fix memory leak and potential caching issue with usePage (#1366)

Author: jessarcher

stubs/inertia/resources/js/Components/Banner.vue

@@ -1,14 +1,15 @@
 <script setup>
-import {ref, watchEffect} from 'vue';
+import { ref, watchEffect } from 'vue';
 import { usePage } from '@inertiajs/vue3';
 
+const page = usePage();
 const show = ref(true);
 const style = ref('success');
 const message = ref('');
 
 watchEffect(async () => {
-    style.value = usePage().props.jetstream.flash?.bannerStyle || 'success';
-    message.value = usePage().props.jetstream.flash?.banner || '';
+    style.value = page.props.jetstream.flash?.bannerStyle || 'success';
+    message.value = page.props.jetstream.flash?.banner || '';
     show.value = true;
 });
 </script>

stubs/inertia/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue

@@ -14,6 +14,7 @@ const props = defineProps({
     requiresConfirmation: Boolean,
 });
 
+const page = usePage();
 const enabling = ref(false);
 const confirming = ref(false);
 const disabling = ref(false);
@@ -26,7 +27,7 @@ const confirmationForm = useForm({
 });
 
 const twoFactorEnabled = computed(
-    () => ! enabling.value && usePage().props.auth.user?.two_factor_enabled,
+    () => ! enabling.value && page.props.auth.user?.two_factor_enabled,
 );
 
 watch(twoFactorEnabled, () => {

stubs/inertia/resources/js/Pages/Teams/Partials/TeamMemberManager.vue

@@ -20,6 +20,8 @@ const props = defineProps({
     userPermissions: Object,
 });
 
+const page = usePage();
+
 const addTeamMemberForm = useForm({
     email: '',
     role: null,
@@ -69,7 +71,7 @@ const confirmLeavingTeam = () => {
 };
 
 const leaveTeam = () => {
-    leaveTeamForm.delete(route('team-members.destroy', [props.team, usePage().props.auth.user]));
+    leaveTeamForm.delete(route('team-members.destroy', [props.team, page.props.auth.user]));
 };
 
 const confirmTeamMemberRemoval = (teamMember) => {