v-model to a computed properties, when <input> on blur, the value is reset

[Rockson]

Version

2.2.5

Reproduction link

https://github.com/Rockson/vue-error-computed

Steps to reproduce

<template>
  <input class="input" type="number" v-model="Year">
</template>

<script>
  export default {
    data () {
      return {
        date: new Date()
      }
    },
    computed: {
      Year: {
        get: function () {
          console.log(`get: ${this.date}`)
          return this.date.getFullYear()
        },
        set: function (year) {
          this.date.setFullYear(year)
          console.log(`set: ${this.date}`)
        }
      }
    }
  }
</script>

Start the dev server and go to the root. On the browser, change the input content then blur the input.

the actual code is in src/components/Hello.vue

see also #3389

What is expected?

I expect the get method to be called after keyup

What is actually happening?

It won't call the get method after keyup, It will erase the changes in the input after blur

[yyx990803]

Vue's reactivity only works on plain JavaScript objects. Native Date methods are not reactive.

[isometriq]

I think I have the exact same issue, but seems different, try this:
https://jsfiddle.net/eyosnnun/1/

In the example, whenever accessing specifically this.editing in the get method (which is used in the onblur event), it clears the field. Then typing in the other dummy field which updates another data makes the typed value appear. If commenting in the onblur event to not use the this.editing, the problem does not occur...

It seems to be related to the cached value of the computed function to be a bit too late. I've tried $forceUpdate, and $nextTick, but doesnt change the behavior.

Let me know if I should create a new issue instead

[isometriq]

oops forgot props['value']
https://jsfiddle.net/eyosnnun/3/
the example now works ..i'll see what else could be wrong

[isometriq]

ok, I've found the problem i think
https://jsfiddle.net/eyosnnun/4/

the problem happens then this.value is not declared.
ie: v-model="wrapper.rawvalue"

data: {
      wrapper: {},
    }

declaring rawvalue fixes the issue
probably another un-reactive value issue

It's worth noting that using methods (ie setDisplayValue() getDisplayValue()) instead of computed works. But I guess the best-practice would be to declare the object keys.

[isometriq]

I confirm form data keys were not initialized