Vue3 model updates initially after saving code, but not after a browser refresh

Question

I have a bit of a quantum problem happening. I have some code (below) that is not displaying the value of the data model. So I put a console.log in to see what's going on and then it works... none of the other code changes, but by looking at it, it exists. Then if I refresh the page, it's gone again

[Update] It's not the console.log itself (whew - that would be wierd). It's the state when I change the file vs when i do a fresh browser load. What's different there that I should be looking at? I'm new to VueJS, and I'm really more of a python / backend dev anyway, so sorry if this is basic stuff.

The template code in child component

              <v-text-field v-else
                @change="updateValue(field.name, $event)"
                persistent-placeholder
                :model-value="(item as any)[field.name]"
                :label="field.title || field.name"
              ></v-text-field>

item is passed in as a Model and converted as follows

  props: {
    input: {
      type: Object || null,
      default: null
    },
  },
  data() {
    return {
      item: {...this.input},
    }
  },

which comes from the parent

    <ModelComponentVue 
      :input="item"
    />

which gets the data in created()

DataStore.query(User).then((items:Array<User>) => {
  if (items.length > 0) {
    this.item = items[0] // I suspect this could be not responding to reactivity in Vue3 ???
  }
})

Answer 1

Parts of your code only use initialData contrary to what you might think. Pay attention to the code below.

  data() {
    return {
      item: {...this.input},
    }
  },

In the above code, you will only have the initial value of the input and you will lose the other values. The easiest way to use props is to use them directly.

However, for more complex concepts, you can use computed or toRef, etc.

Try the code below

              <v-text-field v-else
                @change="updateValue(field.name, $event)"
                persistent-placeholder
                :model-value="input[field.name]"
                :label="field.title || field.name"
              ></v-text-field>

props: {
    input: {
      type: Object ,
      default: () => {}
    },
  },