Наталия

нет. Системные элементы интерфейса, такие как модальные окна переопределить нельзя

data: () => ({
  width: 0,
}),
computed: {
  itemSize() {
    return this.width > 700 ? 46 : 56;
  },
},
methods: {
  onResize() {
    this.width = window.innerWidth;
  },
},
created() {
  this.onResize();
  window.addEventListener('resize', this.onResize);
},
beforeDestroy() {
  window.removeEventListener('resize', this.onResize);
},

// или

data: () => ({
  itemSize: null,
}),
created() {
  const mql = window.matchMedia('(max-width: 700px)');
  const onChange = () => this.itemSize = mql.matches ? 56 : 46;
  onChange();
  mql.addEventListener('change', onChange);
  this.$on('hook:beforeDestroy', () => mql.removeEventListener('change', onChange));
},

:item-size="itemSize"

Вариант раз - запоминаем выделенные ячейки:

data: () => ({
  selected: [],
}),
methods: {
  key: (x, y) => `${y}.${x}`,
  select({ buttons, target: { dataset: { key } } }) {
    if (buttons) {
      const index = this.selected.indexOf(key);
      if (index !== -1) {
        this.selected.splice(index, 1);
      } else {
        this.selected.push(key);
      }
    }
  },
},

<table>
  <tr v-for="y in 10">
    <td
      v-for="x in 10"
      @mousedown="select"
      @mouseover="select"
      :data-key="key(x, y)"
      :class="{ selected: selected.includes(key(x, y)) }"
    >{{ key(x, y) }}</td>
  </tr>
</table>

Вариант два - храним состояния всех ячеек:

data: () => ({
  items: [...Array(10)].map(() => Array(10).fill(false)),
}),
methods: {
  select(row, index, e) {
    if (e.buttons) {
      this.$set(row, index, !row[index]);
    }
  },
},

<table>
  <tr v-for="(row, y) in items">
    <td
      v-for="(cell, x) in row"
      @mousedown="select(row, x, $event)"
      @mouseover="select(row, x, $event)"
      :class="{ selected: cell }"
    >{{ y + 1 }}.{{ x + 1 }}</td>
  </tr>
</table>

Выкидываем jquery / jquery-ui, вместо них используем что-то более уместное - например, Vue.Draggable. Следим за изменениями списков с помощью watch, в обработчике пишем значение в localStorage. При загрузке, соответственно - достаём (если есть). Как-то так:

data: () => ({
  newTask: '',
  items: {},
}),
watch: {
  items: {
    deep: true,
    handler: val => localStorage.setItem('items', JSON.stringify(val)),
  },
},
methods: {
  addTask() {
    const title = this.newTask.trim();
    if (title) {
      const id = 1 + Math.max(0, ...Object.values(this.items).flat().map(n => n.id));
      this.items.A.push({ id, title });               
    } else {
      alert('Введите текст задачи');
    }
    this.newTask = '';
  },
},
created() {
  let items = null;
  try {
    items = JSON.parse(localStorage.getItem('items'));
  } catch (e) {}
  this.items = items || дефолтное значение;
},

<div>
  <input placeholder="текст задачи" v-model="newTask">
  <button @click="addTask">+</button>
</div>
<draggable
  v-for="(v, k) in items"
  v-model="items[k]"
  :key="k"
  :options="{ group: 'tasks' }"
  element="ul"
  class="connectedSortable"
>
  <li v-for="item in v" :key="item.id">{{ item.title }}</li>
</draggable>