title: VueJS: @click.native.stop = "" possible?
body: <p>I have several nested components on the page with parents component having <code>@click.native</code> implementation. Therefore when I click on the area occupied by a child component (living inside parent), both click actions executed (parent and all nested children) for example</p>
  
  <pre><code>&lt;products&gt;
     &lt;product-details&gt;
         &lt;slide-show&gt;
               &lt;media-manager&gt;
                    &lt;modal-dialog&gt;
     &lt;product-details&gt;
         &lt;slide-show&gt;
               &lt;media-manager&gt;
                    &lt;modal-dialog&gt;
   &lt;/products&gt;
  </code></pre>
  
  <p>So I have a list of multiple products, and when I click on "canvas" belonging to modal dialog - I also get <code>@click.native</code> fired on product-details to which modal-dialog belongs. Would be nice to have something like <code>@click.native.stop="code"</code>, is this possible?</p>
  
  <p>Right now I have to do this:</p>
  
  <pre><code>@click.native="clickHandler"
  and then 
  
    methods: {
      clickHandler(e) {
        e.stopPropagation();
        console.log(e);
      }
  </code></pre>
  
  <h3>code</h3>
  
  <pre><code>&lt;template&gt;
    &lt;div class="media-manager"&gt;
      &lt;div v-if="!getMedia"&gt;
        &lt;h1&gt;When you're ready please upload a new image&lt;/h1&gt;
        &lt;a href="#"
           class="btn btn--diagonal btn--orange"
           @click="upload=true"&gt;Upload Here&lt;/a&gt;
      &lt;/div&gt;
      &lt;img :src="getMedia.media_url"
           @click="upload=true"
           v-if="getMedia"&gt;
      &lt;br&gt;
      &lt;a class="arrow-btn"
         @click="upload=true"
         v-if="getMedia"&gt;Add more images&lt;/a&gt;
      &lt;!-- use the modal component, pass in the prop --&gt;
      &lt;ModalDialog
        v-if="upload"
        @click.native="clickHandler"
        @close="upload=false"&gt;
        &lt;h3 slot="header"&gt;Upload Images&lt;/h3&gt;
        &lt;p slot="body"&gt;Hello World&lt;/p&gt;
      &lt;/ModalDialog&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import ModalDialog from '@/components/common/ModalDialog';
  export default {
    components: {
      ModalDialog,
    },
    props: {
      files: {
        default: () =&gt; [],
        type: Array,
      },
    },
    data() {
      return {
       upload: false,
      }
    },
    computed: {
      /**
       * Obtain single image from the media array
       */
      getMedia() {
        const [
          media,
        ] = this.files;
  
        return media;
      },
    },
    methods: {
      clickHandler(e) {
        e.stopPropagation();
        console.log(e);
      }
    }
  };
  &lt;/script&gt;
  
  &lt;style lang="scss" scoped&gt;
  .media-manager img {
    max-width: 100%;
    height: auto;
  }
  
  a {
    cursor: pointer;
  }
  
  &lt;/style&gt;
  </code></pre>