title: How to access child component's reactive data in a slot?
body: <p>Currently, I have a parent component, which renders a child component, and also passes a component (a modal, called Modal.vue) into the child as a slot.</p>
  
  <p>Parent.vue</p>
  
  <pre><code>&lt;ChildComponent :id='1&gt;
   &lt;modal slot="modal" :postTitle="'test'" /&gt;
  &lt;/ChildComponent&gt;
  </code></pre>
  
  <p>Child.vue</p>
  
  <pre><code>export default {
  props : ['id'],
  data(){
  return {
   modalHeading : "Heading"
  }
  }
  &lt;template&gt;
  &lt;slot name="modal"&gt;&lt;/slot&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Modal.vue</p>
  
  <pre><code>&lt;script&gt;
  export default {
    name: "model",
    props: ["postTitle"],
    data() {
      return {
        heading: "test"
      };
    },
    mounted() {
      console.log("mounted modal slot");
      console.log(this.postTitle);
      console.log(this.modalHeading);
  };
  &lt;/script&gt;
  
  &lt;template&gt;
    &lt;div&gt;
      &lt;h2&gt;{{ modalHeading }}&lt;/h2&gt;
      &lt;h3&gt;This will be the modal slot&lt;/h3&gt;
      &lt;p&gt;{{ postTitle }}&lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>My question is, how can I access the child's data (and functions) in my slot component? </p>
  
  <p>I've been trying to get it to work with scoped slots, but can't seem to crack the syntax.</p>