0xD34F

computed: {
  newTodoValid() {
    return this.newTodo.length >= 10;
  },
},

<input :class="newTodoValid ? 'valid' : 'not-valid'">
<button :disabled="!newTodoValid">

.valid {
  border: 2px solid green;
}

.not-valid {
  border: 2px solid red;
}

Например. Или, один интервалтаймаут на все экземпляры.

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 } }) {
  ...