用vue写一个按钮，要求当鼠标悬停在按钮上时，弹出两个新的按钮

<template>
<div class="button-wrapper">
<button class="main-button" @mouseover="showSubButtons">主按钮</button>
<div class="sub-buttons" v-show="isShowSubButtons">
<button class="sub-button">子按钮1</button>
<button class="sub-button">子按钮2</button>
</div>
</div>
</template>

<script>
export default {
data() {
return {
isShowSubButtons: false
}
},
methods: {
showSubButtons() {
this.isShowSubButtons = !this.isShowSubButtons
}
}
}
</script>

<style>
.main-button {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

.sub-buttons {
display: flex;
flex-direction: column;
position: absolute;
top: 40px;
left: 0;
}

.sub-button {
padding: 5px;
background-color: #f2f2f2;
color: black;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 5px 0;
}
</style>