Vue.js Vuetify：动态设置断点？

我有一个滑块，我想用它来设置flex框网格上的断点。根据“列”数据点的当前值调整网格xs1到xs12。我试过v-bind，但不起作用。我该怎么做

滑块：

<v-slider
  v-model="columns"
  :label="`Columns : ${columns}`"
  max="12"
  ticks
  ></v-slider>

您需要，这将对象的值绑定到与键同名的属性：

v-bind="{[`xs${columns}`]: true}"

data: () => ({
  numberOfRecords: 40,
  columns: 6,
}),

v-bind="{[`xs${columns}`]: true}"