Using dynamic Pinia stores when Vue route changes

[Joebayld]

I have an app that has a handful of dynamic components and each one needs it's own store. I'm having anm issue referencing the correct Pinia store when each route changes. The store id is based off the current route. See code below.

This is the component that creates / uses the store.

<script setup lang="ts">
import makeStore from "./store";
import { useRoute } from "vue-router";

const route = useRoute();
const id = route.params.widgetID;

const store = makeStore(id);

// now i use the store in my template
</script>

This code creates a new store with the given id:

import { defineStore } from "pinia";
import { ref } from "vue";

export default function makeStore(id: string) {
  return defineStore(id, () => {
    const testString = ref("");
    return { testString };
  })();
}

The issue is when I have the route update, the store doesn't because it's originally created with the first components params. Is there a better way to do this?