How to Toggle Visibility of VueJs Component?

In my Laravel App, I have a button on Blade template to show/hide a Vue Component. I tried with the following with the help of the following code here. I get following error:

[Vue warn]: Property or method "isShow" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

@extends('layouts.app')
@section('content')
 <button v-on:click="isShow = !isShow">Toggle hide and show</button>
 <site-email  v-if="isShow"></site-email>
@endsection

Component

 <template>
    <div class="label label-info"> 's Email</div>
 <template>

 <script>
  export default {
    data(){
      return {
          isShow : false,
        }
    }
 }
 </script>

I will highly appreciate your help. 

via Chebli Mohamed