我想通过v-bind：class从vue-js脚本中调用这个方法，它应该在我的项目中的div部分添加一个css类。如果在语法中不传递参数，我就可以调用该方法而不会出错。但是当我在语法中包含一个参数时，它在控制台中显示错误，页面崩溃。
这是我正在使用的脚本：

const app = Vue.createApp({
  data() {
    return {
      boxASelected: false,
      boxBSelected: false,
      boxCSelected: false,
    };
  },

  computed: {
    addNewClass (box) {
      if (box === 'A') {
        return {active: this.boxASelected};
      } else if (box === 'B') {
        return {active: this.boxBSelected};
      } else if (box === 'C') {
        return {active: this.boxCSelected};
      }
    },
  },

  methods: {
    boxSelected(box) {
      if (box === 'A') {
        this.boxASelected = !this.boxASelected;
      } else if (box === 'B') {
        this.boxBSelected = !this.boxBSelected;
      } else if (box === 'C') {
        this.boxCSelected = !this.boxCSelected;
      }
    },
  },
});

app.mount('#styling');

下面是HTML代码：

<section id="styling">
      <div
        class="demo"
        :class="addNewClass('A')"
        @click="boxSelected('A')"
      ></div>
      <div
        class="demo"
        :class="addNewClass('B')"
        @click="boxSelected('B')"
      ></div>
      <div
        class="demo"
        :class="addNewClass('C')"
        @click="boxSelected('C')"
      ></div>
    </section>

在上面的HTML代码中，我使用代码:class="addNewClass"调用函数，它工作得很好。但是当我使用相同的代码和参数:class="addNewClass('A')"时，页面崩溃，控制台生成错误。问题是，如何从html代码中调用带有v-bind：class="”属性的vue函数？
我试图通过调用VueJS脚本中的函数，通过v-bind：class属性将新的css类添加到div元素中。当我在调用函数时没有传递参数时，它正在工作。但是当我传递一个参数时，它会生成一个错误。