How to preserve Pinia store value types when using Vuetify bound control?

[Liquidream]

Hi all,

I'm struggling to find a way to get Vuetify + Pinia to play nicely when it comes to preserving types in the store.
I want to preserve certain values as numbers, but whenever I modify them (using binding to Vuetify controls) - the values that get pushed down get converted to string.

I'm declaring my Prop store as follows (using an interface for types, which is inferred(?) later at retrieval)...

import { defineStore } from "pinia"

export interface PropModel {
  id: string
  name: string
  image?: string
  desc?: string
  x?: number
  y?: number
  width?: number
  height?: number
  // ...
}

export interface PropState {
  props: PropModel[]
}

export const usePropStore = defineStore({
  id: "propStore",
  state: (): PropState => ({
    props: [],
  }),
  getters: {
  },
  actions: {
  },
  persist: true, // Save to localStorage
})

...the World store is defined in a similar way, but has a getCurrentProp(state) method to get the related prop:

getCurrentProp(state): PropModel | undefined {
  const propStore = usePropStore()
  return propStore.props.find((item) => item.id === state.currPropId)
},

In my .vue file, I'm loading the store as follows...

<script setup lang="ts">
    //...
    import { useWorldStore } from "../stores/WorldStore"
    const worldStore = useWorldStore()
    const model = worldStore.getCurrentProp || ({} as PropModel)
</script>

I'm using v-text boxes (in "number" mode) to bind to the model...

<v-col>
  <v-text-field label="Y-Pos" v-model="model.y" type="number"></v-text-field>
  <v-text-field label="Height" v-model="model.height" type="number"></v-text-field>
</v-col>

But when the update any of the number values using the vuetify text box, the values in the store instantly convert to strings...
(which breaks other parts of my code that react to store changes, expecting them to be numbers)

Does anyone have any suggestions how to best manage this?
(thx in advance)

[Liquidream]

In case anyone else has a similar issue - this was solved by adding the .number modifier (https://vuejs.org/guide/essentials/forms.html#number) to the v-model, as so...

<v-col>
  <v-text-field label="Y-Pos" v-model.number="model.y" type="number"></v-text-field>
  <v-text-field label="Height" v-model.number="model.height" type="number"></v-text-field>
</v-col>