v-model incorrectly modifying cache / cache not cleared ondestroyed

[McPo]

Description

Essentially if I bind the result of a apollo query to a input text field. Then further edit that text.
If the component was to be destroyed and recreated, my edits would still exist.

This contrasts with how it would work if I was binding directly to a data variable.
It appears that my edits are being saved to the cache without any mutation being actioned.

So if you go to edit a users name in a dialog box (pre-populated by a query with their current name).
Change it but then decide you don't wish to submit the change, so you hit cancel, if you were to reopen the dialog again your edits would still be there.

Versions

vue: 2.6.12
vue-apollo: 3.0.4
apollo-client: 2.6.10

Reproduction Steps

I have provided a codesandbox example of the issue.

https://codesandbox.io/s/apollovue-apollodata-cache-issue-5pq2z?file=/src/SimpleDialog.vue

1. Enable checkbox
2. Edit both textboxes
3. Toggle checkbox
4. Notice how the first one defaults back to the original value, while the second retains your edits (which were never comitted/mutated).

Workaround

<input type="text" v-model="name">
...

data() {
  return {displayName: ''}
},
apollo: {
  member: {
    ...
    result (r) {
      if (!r.loading) this.name = r.data.User.name;
    }
  }
}

I don't believe this should be required. The fact that the cache appears to be getting updated (confirmed via readQuery), without a mutation ever occurring, seems very bad. As the cache no longer represents whats on the server (i.e What was cached).

Its also inconsistent with data() being cleared when a component is destroyed and recreated. At the very least this behaviour should be documented, but I believe a fix is the optimal solution.

Cheers,
Emmet

[dmitry]

@McPo in 2.x you should use cache.writeFragment or similar to update a cache contents. In apollo-client 3.x you can use https://www.apollographql.com/docs/react/local-state/reactive-variables/, but as I know vue-apollo doesn't support 3.x yet.

[McPo]

My point is that modifications made to binded variables within data() should not be effecting the "cache" at all. I don't want it updating the cache, and it shouldn't update the "cache". The cache is suppose to represent cached contents of previous server queries, the content should only be changed by a mutation (or as you stated perhaps by an explicit call to cache.writeFragment).

[Akryum]

You shouldn't directly modify cache data. v-model directly modifies the variable you pass to it.

[McPo]

Agreed. But that's not what's happening. The variable in data() is being cached within Apollo.

Have you looked at the example?

[dmitry]

@McPo from the example name isn't defined in the data function. Is this done by intention?

[bbugh]

@McPo this is a subtle issue that has been around since results were changed to not be read-only. The workaround you gave is the unfortunate best option. We use a cloneDeep in result to copy to a form data object at times where our objects needs to be modified.