Getter does not update when route param updates

Question

I have a vue3 app that has a parameterized route and a Pina store getter that gets a list of items based on the route param.

My issue is that my list of values from the store (gotten via a getter) does not get re-gotten when the route param is updated.

<script lang="ts" setup>
  import {useIncStore} from "@/store/inc";
  import {useRoute} from "vue-router";

  const route = useRoute()
  const state = Array.isArray(route.params.state) ? route.params.state[0] : route.params.state
  const incStore = useIncStore();

  // EDIT - Neither of these work...
  const incs = incStore.getByState(state)
  // const incs = computed(() => incStore.getByState(state))

</script>

How can I call incStore.getByState(state) again when state updates? If I put {{state}} on my page it updates when the route changes but my list of items does not.

Here is my getter in the store:

  getters: {
    getByState(state) {
      return (s: string) => state.records.filter((rec: any) => rec.state === s)
    }
  }

Answer 1

Figured I'd post my answer, as the comments above said I had to use computed properties to react to both the route change and then the changed route value.

<script lang="ts" setup>
import useIncStore from "@/store/inc";
import {useRoute} from "vue-router";
import {computed} from "vue";

const route = useRoute()
const incStore = useIncStore();
const state = computed({
  get() {
    return Array.isArray(route.params.state) ? route.params.state[0] : route.params.state
  },
  set() {
  }
})

const incs = computed({
  get() {
    return incStore.getByState(state.value)
  },
  set() {
  }
})
</script>