How to organize two-way binding in an input nested in a component?

Question

Vue.js

Good afternoon.
I'm trying to make a wrapper over a standard input, the problem is that data is transferred inside, but does not go outside.
Examples: https://jsfiddle.net/Tenebrius/c7r8h5gf/28/
In the first example everything works fine.
In the second, the data changes internally, but does not go outward to the main model.
And the third example is relevant, I want to organize something like this.

Answer 1

It is necessary to forward the input event, i.e. replace with

<range :value="value" @input="$emit('input', $event)"></range>