title: Sharing data from a VueJS component
body: <p>I have a VueJS address lookup component.</p>
  
  <pre><code>Vue.component('address-lookup',
  {
      template: '#address-lookup-template',
      data: function()
      {
          return {
              address: {'name': '', 'town:': '', 'postcode': ''},
              errors: {'name': false, 'town': false, 'postcode': false},
              states: {'busy': false, 'found': false},
              result: {}
          }
      },
      methods:
      {
          findAddress: function(event)
          {
              if( typeof event === 'object' &amp;&amp; typeof event.target === 'object' )
              {
                  event.target.blur();
              }
  
              $.ajax(
              {
                  context: this,
                  url: '/lookup',
                  data:
                  {
                      'name':     this.address.name,
                      'town':     this.address.town,
                      'postcode': this.address.postcode
                  },
                  success: function(data)
                  {
                      this.states.busy = false;
                      this.states.found = true;
                      this.address.name = data.name;
                      this.result = data;
                  }
              });
          },
          reset: function()
          {
              this.states.found = false;
              this.result = {};
          }
      }
  });
  </code></pre>
  
  <p>Inside my template I've then bound the result like so:</p>
  
  <pre><code>&lt;p&gt;{{ result.formatted_address }}&lt;/p&gt;
  </code></pre>
  
  <p>There is some extra data returned within the result (like a twitter handle) that isn't part of the address lookup template, and occurs on a separate part of the form. For reasons relating to how my form is structured I can't include these inputs within the same template.</p>
  
  <p>I found a way to bind those inputs, although it felt somewhat 'hacky'.</p>
  
  <pre><code>&lt;input type="text" name="twitter" v-model="$refs.lookupResult._data.result.twitter"&gt;
  </code></pre>
  
  <p>That all works fine.</p>
  
  <p>My problem is that the form is included as part of a larger template sometimes in the context of creating a new record, sometimes in the context of editing. When editing a record, the lookup component is removed (using an <code>if</code> server-side, so the template is no longer loaded at all) and when that happens I get this error.</p>
  
  <pre><code>$refs.lookupResult._data.result.twitter": TypeError: Cannot read property '_data' of undefined
  </code></pre>
  
  <p>This makes sense. <code>lookupResult</code> is defined when I include the template, and when editing I am removing this line:</p>
  
  <pre><code>&lt;address-lookup v-ref:lookup-result&gt;&lt;/address-lookup&gt;
  </code></pre>
  
  <p>I've worked around it by including a version of each extra input without the <code>v-model</code> attribute, again using a server-side <code>if</code>. But there are quite a few of these and it's getting a bit messy.</p>
  
  <p>Is there a cleaner approach I could be using to better achieve this?</p>