title: Is there any way to refer to a Vue variable from another component
body: <p>I am trying to, upon a click on a button, reflect the value returned by that function to another component's value. For example, in this case I have a "Choose" button which when pressed opens a dialog. Once a folder is selected within that dialog, I want the variable tied to the input to be updated.</p>
  
  <p>Right now what I am doing is using a custom data-destination attribute that I read within the openPickerDialog, then I set the variable to the value returned by the picker dialog. I am trying to make my function as general as possible so that I can reuse it. Is there a better way to achieve what I want with Vue? Something built-in?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class='input-group align-items-end'&gt;
    &lt;input :id='destinationFolder' class='form-control shadow-none' type='text' v-model='destinationFolder'/&gt;
    &lt;span class='input-group-btn ml-2'&gt;
      &lt;button @click='openPickerDialog' class='btn btn-choose shadow-none' data-destination='destinationFolder' data-dialog='openDirectory' type='button'&gt;Choose&lt;/button&gt;
    &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>openPickerDialog({target}) {
    window.api
        .send('openDialog', options)
        .then((results) =&gt; {
          if (results !== null) {
            this.$data[target.dataset.destination] = results[0]
          }
        })
        .catch((e) =&gt; {
          console.error(e)
        })
  }
  </code></pre>