title: Can't access to nested element from parent
body: <p>I can't to acces to child's element method prom parent element using ref='menu'. When I trying call $refs.menu.show in button el, which is in Vue app element, all work fine, in photo el it doesn't work. All components registered in parent Vue app. </p>
  
  <pre><code>//ERROR        
  vue.js:634 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'show' of undefined"
  
      found in
  
      ---&gt; &lt;Photo&gt;
             &lt;Root&gt;
  </code></pre>
  
  <p>My HTML code in #app</p>
  
  <pre><code>    // For tests
      &lt;button @click.prevent='$refs.menu.show'&gt;&lt;/button&gt;
  
      &lt;div class="center" :style="{ width : center_div_width+'px', height : window_height+'px'}"&gt;
          &lt;template v-for='(row, index1) in info'&gt;
              // Parent element
              &lt;photo v-for="(item, index2) in row" :item="item" :art_width='art_width'&gt;
                  // Child element
                  &lt;cmenu ref='menu'&gt;
                      &lt;li&gt;Test&lt;/li&gt;
                      &lt;li&gt;Test2&lt;/li&gt;
                  &lt;/cmenu&gt;
              &lt;/photo&gt;
          &lt;/template&gt;
      &lt;/div&gt;
  // JS
  </code></pre>
  
  <p>My components.
  I'm trying to call nested app method from template of 'photo' component:</p>
  
  <pre><code>Vue.component('photo', {
      props: ['item', 'art_width'],
      template: `&lt;a class='art' href="" :style="offset(item.offsetX, item.offsetY)" @mouseover="hover = true" @mouseout="hover = false"&gt;
                     &lt;img v-bind:src="/media/ + item.path" class="img" :width="art_width+'px'"&gt;
                     &lt;a href="" class='art-owner' align="center" v-show='hover'&gt;{{item.owner}}&lt;/a&gt;
                     &lt;a href="" class='art-menu' align="center" v-show='hover' @click.prevent='$refs.menu.show'&gt;...&lt;/a&gt;
                     &lt;slot&gt;&lt;/slot&gt;
                 &lt;/a&gt;`,
      data: function () {
          return {
              hover: false,
          }
      },
      methods: {
          offset (valueX, valueY) {
            return `transform: translateX(${ valueX }) translateY(${ valueY })`
          },
      },
  
  })
  context_menu = Vue.component('cmenu', {
          template: `&lt;div class='context-menu'&gt;
                        &lt;ul&gt;
                          &lt;slot&gt;&lt;/slot&gt; 
                        &lt;/ul&gt;
                     &lt;/div&gt;`,
          data: function () {
              return {
                  ifshow: false,
                  style = null
              }
          },
          mounted() {
              window.addEventListener('click', (event) =&gt; {
                  if (Object.is($el, event.target) == true) {
                      this.ifshow = false;
                  }
              });
          },
          methods: {
              show: function(event) {
                  this.ifshow = true;
              }
          }
      })
  </code></pre>