title: Accessing Vue JS component data inside PHP using JQuery
body: <p>I have a vue js application which is compiled and rendered in its own enviroment within my php project. I use a old version of a PHP framework and not Laravel.</p>
  <p>My vue js application instance is created in the main.js file</p>
  <pre><code>Vue.component(
      'Dashboard',
      require('./components/dashboard/Index.vue').default
  );
  console.log(window.location);
  const router = new VueRouter({
      mode: &quot;history&quot;,
      base: window.location.pathname,
  });
  
  var myVueInstance = new Vue({
      router
  }).$mount('#app');
  </code></pre>
  <p>and then i use this compiled vue js application just before the closing  tag in my project.</p>
  <pre><code>&lt;script src=&quot;&lt;?php echo getenv('APP_DEBUG') == 'false'
      ? Yii::app()-&gt;baseUrl.'/js/vue/js/main.min.js'
      : 'http://localhost:8080/js/main.js' ?&gt;&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>The issue is that i am trying to inject and set a data key inside one of the components using the ref name but i cannot get hold of anything to set the key.</p>
  <pre><code>&lt;div id=&quot;app&quot;&gt;
      &lt;quote-upload ref=&quot;quoteUpload&quot;&gt;&lt;/quote-upload&gt;
      &lt;view-quote ref=&quot;viewQuote&quot;&gt;&lt;/view-quote&gt;
      &lt;invoice-upload ref=&quot;invoiceUpload&quot;&gt;&lt;/invoice-upload&gt;
  &lt;/div&gt;
  </code></pre>
  <pre><code>var self = this;
  $(document).on(&quot;click&quot;, &quot;.openQuoteModal&quot;, function () {
      myVueInstance.$refs.quoteUpload.vehicleid = $(this).data('id'); //this doesnt work.
  }); 
  </code></pre>
  <p>but i am unable to do so as it is always undefined.</p>
  <p>Is there any way to do this?</p>