How to Stop Propagation / Opening v-expansion-pane

Question

Any kind of button included on the expansion panel will also open/close the panel when you click it (propagation), which is undesired generally. This is easily prevented with using @click.stop. v-edit-dialog component presents a challenge however. How do you prevent this edit-dialog from opening/closing the expansion panel when it is activated?

new Vue({
 el: '#app',
 data(){    
   return { title: "Editable Title" }
 }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app id="inspire">
    <v-card width=400>
    <v-expansion-panel popout>
          <v-expansion-panel-content>
            <div slot="header">
              <v-edit-dialog :return-value.sync="title">                
                {{ title }}              
            <v-text-field slot="input" v-model="title"></v-text-field>
          </v-edit-dialog>
            </div>
            <v-card color="blue lighten-4">
              <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
            </v-card>
          </v-expansion-panel-content>
        </v-expansion-panel>
        </v-card>
  </v-app>
</div>

Answer 1

You can use @click.native.stop

          <v-edit-dialog @click.native.stop>                
                Editable Title                 
            <v-text-field slot="input"></v-text-field>
          </v-edit-dialog>

Codepen demo