title: How to access parents data value in vuejs with the template syntax
body: <p>In my VueJS app I am using bootstrap-vue and want to use iframe inside a collapsable elements <code>b-collapse</code>. Because of some problems with iframe content and resizing (problem not related here) I found out that if I enable/disable <code>b-embed</code> with conditional rendering it works.</p>
  
  <p>The parent component <code>b-collapse</code> has a data element called <code>show</code> which change its state if toggle is clicked. In my <code>HelloWorld</code> component I want that <code>b-collapse</code> can pass it's <code>show</code> value into the <code>if</code> check of <code>b-embed</code>. </p>
  
  <p>My approach with <code>this.$parent.$data.show</code> isn't working and I am not sure if there is any better way to do so.</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;b-btn v-b-toggle.logs&gt;
      &lt;span class="when-opened"&gt;Close&lt;/span&gt;
      &lt;span class="when-closed"&gt;Open&lt;/span&gt;
      Trace
    &lt;/b-btn&gt;
    &lt;b-collapse id="logs"&gt;
      &lt;b-embed :src="src" v-if="this.$parent.$data.show"&gt;&lt;/b-embed&gt;
      &lt;div&gt;Data: {{this.$parent.$data.show}}&lt;/div&gt;
    &lt;/b-collapse&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script lang="ts"&gt;
  import Vue from "vue";
  import { Prop, Component, Inject } from "vue-property-decorator";
  
  @Component
  export default class HelloWorld extends Vue {
    src = "http://localhost:7681/";
  }
  &lt;/script&gt;
  </code></pre>