why is in Vuejs the toggle functionality not working - vue.js

Question

m pulling the last strand of ny hair working onto toggle functionality using vuejs the console i dont find anything
my code seems to be
<template>
<div class="wrapper">
<nav class="nav flex-column sideBar" v-show='isOpen'>
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Contact</a>
</nav>
<div class="container-fluid">
<nav>
<div class="content">
<div class="navbar navbar-expand-lg">
<button type="button" class="btn btn-info" #click='toggleSideBar'>
<i class="fas fa-align-left"></i>
</button>
</div>
</div>
</nav>
</div>
</div>
</template>
<script>
export default{
data(){
isOpen=false;
},
method(){
toggleSideBar();
},
toggleSideBar(){
console.log("==========="+this.isOpen)
this.isOpen=!this.isOpen;
}
}
</script>
button on click the togglle fuctionality doesnt work out doent work out
any help much appreciated
this is the inspect html in browser
<button type="button" class="btn btn-info">
and not
<button type="button" class="btn btn-info" onclick='toggleSidebar()'>
the click function not added to it
m using sass
.wrapper {
display: flex;
align-items: stretch;
width:100%;
}
.sideBar{
border: 1px solid;
width: 30%;
height: 100vh;
margin-left: 0;
transition: all 0.5s;
background-color: #f9f9f7;
}
.container-fluid {
padding-right: 0px;
padding-left: 0px;
}
.navbar{
#extend .navbar;
background-color: #eae9e5;
}
.sidebar.active {
margin-left: -250px;
}

Answer 1

first, add return then change = to : and ; to , in your data()
data(){
return{
isOpen: false,
}
},
then put the toggleSideBar() inside your method like this:
methods:{
toggleSideBar(){
console.log("================"+this.isOpen)
this.isOpen=!this.isOpen;
}
}
FINAL OUTPUT
export default{
data(){
return{
isOpen: false,
}
},
methods:{
toggleSideBar(){
console.log("================"+this.isOpen)
this.isOpen=!this.isOpen;
},
}
}

Answer 2

<script>
export default{
data(){
isOpen: false; //Change this line to : instead of =
},
method(){
toggleSideBar: function(){
console.log("================"+this.isOpen)
this.isOpen=!this.isOpen;
}
},
}
</script>