title: vue clicking on the action button's focus area breaks it
body: <p>I'm trying to create a floating action button by using vuetify -vspeed dial. I created a logic to style my button whenever it's clicked and it's working perfect, it collapses and expands whenever i click on it. However, if i try to click the focus area of the action buttons, it breaks it and close the buttons. How can i prevent that? When I click on button, it's fine - I use click.stop to make it persistent but if i click to the area right next to button, it closes the buttons which breaks my logic for styling. Here's my code</p>
  
  <p>Test.Vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-card :class="{create: backgroundColor }"&gt;
      &lt;v-speed-dial
        :bottom="true"
        :right="true"
        :direction="direction"
        :transition="transition"
        fixed
      &gt;
        &lt;template v-slot:activator&gt;
          &lt;v-btn
            :class="{is_active:isActive}"
            color="#C6002B"
            fab
            dark
            @click=toggleButton
            x-large
          &gt; 
              &lt;v-icon&gt;{{isActive? 'mdi-close' : 'mdi-account-circle'}}&lt;/v-icon&gt;&lt;span&gt;{{isActive ? "EXPANDED" : ''}}&lt;/span&gt;
          &lt;/v-btn&gt;
        &lt;/template&gt;
          &lt;v-btn 
              v-if="finalProp"
              :class="{alignLeft:isActive}"
              fab 
              dark 
              large
              @click.stop="$emit('func1')"
              color="white" &gt;
              &lt;v-icon color="#F0BE85"&gt;mdi-pencil&lt;/v-icon&gt;
          &lt;/v-btn&gt;
          &lt;v-btn
              v-if="thirdProp"
              :class="{alignLeft:isActive}"
              fab
              dark
              large
              @click.stop="$emit('func2')"
              color="white"&gt;
          &gt;
              &lt;v-icon color="purple"&gt;mdi-delete&lt;/v-icon&gt;
          &lt;/v-btn&gt;
          &lt;v-btn
              :class="{alignLeft:isActive}"
              v-if="secondProp"
              fab
              dark
              large
              @click.stop="$emit('func3')"
              color="white"&gt;
          &gt;
              &lt;v-icon color="green"&gt;mdi-plus&lt;/v-icon&gt;
          &lt;/v-btn&gt;
          &lt;v-btn 
              v-if="firstProp"
              :class="{alignLeft:isActive}"
              fab
              dark
              large
              @click.stop="$emit('func4')"
              color="white"&gt;
          &gt;
              &lt;v-icon color="red"&gt;home&lt;/v-icon&gt;
          &lt;/v-btn&gt;
      &lt;/v-speed-dial&gt;
    &lt;/v-card&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
    name: 'FloatingButton',
    props: {
      firstProp: Boolean,
      secondProp: Boolean,
      thirdProp: Boolean,
      finalProp: Boolean
    },
  
    data: () =&gt; ({
      direction: 'top',
      fab: false,
      right: true,
      bottom: true,
      transition: 'scale-transition',
      isActive: false,
      backgroundColor: false,
      check:true
    }),
    methods: {
      toggleButton:function() {
        this.isActive = !this.isActive
        this.backgroundColor = !this.backgroundColor
  
      }
    },
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  .is_active {
    min-width:120px
    /* width: 380px;
    height: 70px;
    border-radius: 36px;
    margin:5px; */
  
  }
  .is_active span {
    font-size: 18px;
    letter-spacing: 0px;
  }
  
  .create {
    min-width: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4;
    background:rgba(0,0,0,0.4); 
    color:rgba(0,0,0,0.8);
  }
  } 
  
  &lt;/style&gt;
  </code></pre>
  
  <p>App. vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-app&gt;
     &lt;Test :firstProp=a  :secondProp=b :thirdProp=c :lastProp=d /&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Test from './components/Test'
  
  export default {
    name: 'App',
  
    components: {
      Test
    },
  
    data(){
      return{
        a:true,
        b:true,
        c:true,
        d:true
      }
    }
  };
  &lt;/script&gt;
  </code></pre>