client side state for activeMembership and fetch notes based on same

pages/dashboard.vue

@@ -5,7 +5,16 @@
   });
 
   const { $client } = useNuxtApp();
-  const { data: notes } = await $client.notes.getForCurrentUser.useQuery();
+
+  const theAppState = appState();
+  watch(theAppState.value, (newAppState) => {
+    if(newAppState.activeMembership){
+      const { data: foundNotes } = $client.notes.getForCurrentUser.useQuery({account_id: newAppState.activeMembership.account_id});
+      if(foundNotes.value?.notes){
+        theAppState.value.notes = foundNotes.value.notes;
+      }
+    }
+  }); 
 
   async function changeAccountPlan(){
     const { data: account } = await $client.userAccount.changeAccountPlan.useQuery();
@@ -26,16 +35,18 @@
     const { data: membership } = await $client.userAccount.claimOwnershipOfAccount.useQuery();
     console.log(`updated membership on current account: ${JSON.stringify(membership)}`);
   }
+
   
 </script>
 <template>
   <div>
     <h3>{{ user?.user_metadata.full_name }}'s Notes Dashboard</h3>
-    <p v-for="note in notes?.notes">{{ note.note_text }}</p>
+    <p v-for="note in theAppState.notes">{{ note.note_text }}</p>
 
     <button @click.prevent="changeAccountPlan()">Change Account Plan</button>
     <button @click.prevent="joinUserToAccount()">Join user to account</button>
     <button @click.prevent="changeUserAccessWithinAccount()">Change user access within account</button>
     <button @click.prevent="claimOwnershipOfAccount()">Claim Account Ownership</button>
+    <p>Active ->{{ theAppState.activeMembership?.account_id }}</p>
   </div>
 </template>