How to properly bind values ​​to a Vue component?

Question

JavaScript

I ’m dealing with Vue.js
, I wrote this thing
https://jsfiddle.net/veuop8m7/1/
2 lists, one in the root element, and it has v-model
another directly through the component, and it’s written :valuefor @change
clarity, in the component I do {{value}}what I would like to see that the binding works
after 2 seconds, I change the list on which it renders <option>
after 2 more, I change it, value
help me figure out why the elements behave differently?

Answer 1

It's simple, the :value directive is used in the component - it does not track option changes as v-model does.
I will add: when changing the option, the browser automatically corrects the value of select.value, :value does not take this into account.

Answer 2

Alternatively: https://jsfiddle.net/kulakoff/ywk9ova8/