Vue组件如何使用函数单击按钮或选中复选框来更改工具提示文本和按钮颜色？

<template>
  <div>
    <button :style="{ backgroundColor: buttonColor }" @click="changeTooltipAndColor">
      {{ buttonText }}
    </button>
    <input type="checkbox" v-model="isChecked" @change="changeTooltipAndColor">
    <span>{{ tooltipText }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttonText: '点击我',
      buttonColor: 'blue',
      isChecked: false,
      tooltipText: '这是一个工具提示'
    };
  },
  methods: {
    changeTooltipAndColor() {
      if (this.isChecked) {
        this.buttonText = '已选中';
        this.buttonColor = 'green';
        this.tooltipText = '按钮已被选中';
      } else {
        this.buttonText = '点击我';
        this.buttonColor = 'blue';
        this.tooltipText = '这是一个工具提示';
      }
    }
  }
};
</script>

<style>
/* 你可以在这里添加一些样式 */
</style>