Vue报错：无法正确使用v-bind绑定class和style属性，如何解决？

<template>  <div v-bind:class="classObject"></div>  <div v-bind:style="styleObject"></div></template><script>export default {  data() {    return {      classObject: {        active: true,        'text-danger': false      },      styleObject: {        color: 'red',        fontSize: '16px'      }    }  }}</script>

<template>  <div v-bind:class="classArray"></div>  <div v-bind:style="styleArray"></div></template><script>export default {  data() {    return {      classArray: ['active', 'text-danger'],      styleArray: ['color: red', 'font-size: 16px']    }  }}</script>

<template>  <div v-bind:class="computedClass"></div>  <div v-bind:style="computedStyle"></div></template><script>export default {  data() {    return {      isActive: true,      isDanger: false,      fontSize: 16    }  },  computed: {    computedClass() {      return {        active: this.isActive,        'text-danger': this.isDanger      }    },    computedStyle() {      return {        color: 'red',        fontSize: this.fontSize + 'px'      }    }  }}</script>