vue.js - Real time update between 2 components? -

is possible have realtime update of input fields between 2 components?

in component have input field has v-model="value". wanna pass input realtime other component , fill input field.

data of inputvalue should passed component 2 value props. or maybe i'm wrong result?

component 1

<template>     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">         <input class="mdl-textfield__input" type="text" id="global-{{element}}" v-model="inputvalue">         <label class="mdl-textfield__label" for="global-{{element}}">{{ label }}</label>     </div> </template> 

component 2

<template>      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">         <input name="items[{{prop1}}][{{element}}]" value="{{value}}" class="mdl-textfield__input"                type="text" id="{{element}}">         <label class="mdl-textfield__label" for="{{element}}">{{ label }}</label>     </div> </template>  <script>     export default{         props: ['prop1', 'element', 'value', 'label']      }  </script> 

i tried ...

this.$dispatch('tag-update', this.inputvalue); 

... need @keyup.xx. that's not want. want update pressed , released letter, number etc.

you can achieve events, or can move inputvalue parent component or root , pass each component synced prop.

http://jsfiddle.net/gtmmeak9/118/

the second component doesn't have synced if want 1 way binding on it.