title: How do I keep two identical Vue components in sync with each other?
body: <p>I'm trying to make two radio button clusters on the same page (but inside different drawers) keep in sync with each other. This worked before I broke them out into a component.</p>
  
  <p>Now my component looks like:</p>
  
  <pre><code>Vue.component('radio-cluster', {
  props: ['value'],
  template: `
      ...
      &lt;input type="radio" name="radio" value="Hour" :checked="value == 'Hour'" @input="$emit('input', $event.target.value)"&gt;
      &lt;input type="radio" name="radio" value="Week" :checked="value == 'Week'" @input="$emit('input', $event.target.value)"&gt;
      ...
      `,
  });
  </code></pre>
  
  <p>The Vue instance:</p>
  
  <pre><code>new Vue({
  el: '#app',
  data: function () {
      return {
          timePeriod: "Hour"
      }
  });
  </code></pre>
  
  <p>And the relevant HTML:</p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;radio-cluster v-model="timePeriod"&gt;&lt;/radio-cluster&gt;
      ...
      &lt;radio-cluster v-model="timePeriod"&gt;&lt;/radio-cluster&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The behavior I'm getting is odd. It will correctly show in one of the two clusters, and emit the correct event from either one. But the other component ignores the event from the one I clicked on. <strong>How can I make Vue take the value updated in one component and automatically give it to the other every time either one updates?</strong></p>