0xD34F

if (localStorage.getItem('mediaObjViewSeen') === true) {

Было бы круто, если вы хотя бы поверхностно знакомились с инструментом, прежде чем его использовать:

Ключи и значения всегда строки

Строка не может быть равна булеву значению, сами (надеюсь) понимаете.

Но вообще, по-хорошему, проверять ничего не надо - вместо двух булевых свойств должно быть одно строковое, обозначающее, в каком виде представлять данные:

data: () => ({
  view: localStorage.getItem('view') || 'CardsView',
  // ...
}),
watch: {
  view: val => localStorage.setItem('view', val),
},

Описания доступных вариантов представления складываете в массив, на основе этого массива создаёте кнопки для переключения представлений:

data: () => ({
  views: [
    {
      name: 'CardsView',
      btnClass: 'btn-left',
      img: '...',
    },
    {
      name: 'MediaObjView',
      btnClass: 'btn-right',
      img: '...',
    },
  ],
  // ...
}),

<button
  v-for="n in views"
  :class="[ n.btnClass, view === n.name ? 'btn-active' : '' ]"
  @click="view = n.name"
>
  <img :src="n.img">
</button>

Передаёте view в TweetPreview, используете его значение как имя компонента:

<component
  :is="view"
  :tweet="tweet"
/>

Сначала <...> fetch() был прописан в methods

затем добавил <...> computed: - тогда ошибка появилась

Положите метод fetch где лежал.

Прежде чем реализовывать удаление, дадим пользователю возможность пометить задачу выполненной. Добавим в компонент задачи поддержку директивы v-model. Меняем имя параметра с task на value (или настраиваем model, если надо задать какое-то иное имя), а сам объект задачи заворачиваем в Proxy, который будет перехватывать установку значений свойств, собирать новый объект и отправлять его в родительский компонент:

computed: {
  task() {
    return new Proxy(this.value, {
      set: (target, prop, value) => {
        this.$emit('input', { ...target, [prop]: value });
        return true;
      },
    });
  },
},

И привязываем свойство done к чекбоксу (если кроме done надо редактировать ещё какие-то свойства - нет проблем, точно так же указываем их в v-model соответствующих полей ввода):

<input type="checkbox" v-model="task.done">

Теперь собственно удаление. В компоненте задачи добавляем кнопку, по клику на которую эмитим событие:

<button v-if="task.done" @click="$emit('delete')">delete</button>

В родительском компоненте подписываемся на это событие и удаляем задачу из массива:

<task-element
  v-for="(n, i) in todos"
  v-model="todos[i]"
  @delete="todos.splice(i, 1)"
></task-element>

https://jsfiddle.net/8g45pcx1/

Используйте transition. Блоку, в который выводите значение переменной, назначаете key, равный этому значению. Изменится значение - блок нарисуется заново. Например.

когда нажимаю повторно чтобы остановить музыку, она не останавливается

При каждом вызове метода startAudio создаётся новый объект, play вызываете у одного, а pause у другого. Надо сохранять созданный audio между вызовами startAudio.

Устанавливаете наблюдение за значениями, находите изменившееся, исправляете его - вычитаете из него разность (если она больше 0) между текущей суммой и максимально допустимой. Примерно так оно может выглядеть.

<img :src="wall.users.photo || wall.pages.photo">

Если вдруг не гарантируется наличие хотя бы одного из значений, тогда:

computed: {
  src() {
    const { wall } = this;
    return wall.users.photo || wall.pages.photo;
  },
},

<img v-if="src" :src="src">

Что если таких items должно быть больше двух? Давайте решим задачу в более общем виде.

Вместо объекта пусть будет массив, также добавим в компонент свойство, представляющее индекс отображаемого элемента:

data: () => ({
  index: 0,
  items: [
    [ 'hello, world!!', 'fuck the world', 'fuck everything' ],
    [ '69', '187', '666' ],
    [ '!!!', '???', ':::' ],
    [ '+++', '***', '///' ],
  ],
}),

Если индекс меньше длины массива - показываем содержимое соответствующего элемента, по клику увеличиваем индекс; в противном случае показываем кнопку, клик по которой сбросит индекс:

<ul v-if="index < items.length" @click="index++">
  <li v-for="n in items[index]">{{ n }}</li>
</ul>
<button v-else @click="index = 0">давай заново</button>

<iframe :srcdoc="htmlContent"></iframe>

Меняет только value в input без изменения модели

v-model слушает событие input, так что добавьте event.target.dispatchEvent(new Event('input'))

Вешаете обработчик mousedown, в котором запоминаете target. При обработке клика проверяете, что текущий target совпадает с запомненным - если да, тогда можно закрывать окно.

Замените

<div>
  <span>{{ item.questions[index]['description'] }}</span>
  <span v-if="item.questions[index]['answer'] == 2">Да</span>
  <span v-if="item.questions[index]['answer'] == 1">Нет</span>
</div>

на

<div v-for="n in item.questions">
  <span>{{ n.description }}</span>
  <span>{{ n.answer | answer }}</span>
</div>

filters: {
  answer: val => [ 'Нет', 'Да' ][val - 1],
  ...

.active {
  background: red;
}

data: () => ({
  val: -Infinity,
  ...
}),
methods: {
  onClick() {
    this.val = Math.min(...this.arr.filter(n => n > this.val));
  },
  ...
},

<div v-for="n in arr" :class="{ active: n <= val }">{{ n }}</div>
<button @click="onClick">click me</button>

Оформить среднее значение как вычисляемое свойство.
Вывод на график - пример рисования линий в документации есть.

Ну и всё.

объект передавайте:

v-scroll-text="{ selector: '.source-label', speed: 10 }"

scrollText(el, { value: { selector, speed } }) {
  ...

chartjs-plugin-labels

https://jsfiddle.net/86hpuba4/

UPD. Вынесено из комментариев:

пишу я на Vue, и к сожелению пока неочен хорошо знаком с Vue, поетому пока затрудняюсь подключить сей плагин

Для облегчения работы с vue используйте vue-chartjs. Сам плагин доступен как npm-модуль, так что подключить никаких проблем нет.

nextTick

И ещё вот такого

$('.selectpicker')

быть не должно. Вместо селектора используйте ссылку на элемент.

data: () => ({
  items: Array.from(
    { length: 5 },
    (_, i) => Array.from(
      { length: 5 },
      (_, j) => i * 5 + j
    )
  ),
  active: null,
}),
watch: {
  active(val) {
    if (val) {
      this.$nextTick(() => this.$refs.input[0].focus());
    }
  },
},

<table>
  <tr v-for="(row, iRow) in items">
    <td v-for="(val, iCol) in row" @click="active = { iRow, iCol }">
      <input
        v-if="active && active.iRow === iRow && active.iCol === iCol"
        v-model="row[iCol]"
        @keypress.enter="active = null"
        ref="input"
      >
      <template v-else>{{ val }}</template>
    </td>
  </tr>
</table>

https://jsfiddle.net/grtsxoaf/

computed: {
  flatArr() {
    return this.arr
      .flatMap((n, i) => n.map((m, j) => m && ({ gridRowStart: i + 1, gridColumnStart: j + 1 })))
      .filter(Boolean);
  },
},

<div class="grid">
  <div v-for="n in flatArr" class="cell" :style="n"></div>
</div>