Жук

Раз работает, то просто проверяйте this.$ref.testElem на существование. И ещё обработчики не забывайте удалять в beforeDestroy, а то вам браузер события в уничтоженные компоненты будет посылать :)

Можно. Но не стоит, потому что это скорее всего никак не сэкономит работу. Наоборот, может легко усложнить.

Сначала попробует хоть один spa проект сделать самостоятельно. После этого такой вопрос у вас не встанет.

1) Подрубаем в контекст vue плагин current-device. Я рекомендую его добавлять в прототип Vue. Через Vue install чтоб он всегда был под рукой. Если не шаришь, погугли чёт типа creating plugin Vue.install - там всё просто.
2) Создаём отдельно табы, отдельно аккордеоны. У них должна быть одинаковая модель данных само собой.
3) Создаём обёртку табокордеонов, И под рутом ставим

<template v-if='$device.desktop()'><tabs.../></template>
<template v-else><accordions.../></template>

Вуаля. В зависимости от юзерагента вью зарендерит модель в нужном представлении

Простыми словами - инструмент для быстрого создания проектов под Vue (конфигурация файлов, структура)

1) С помощью width, min-width, max-width Вы манипулируете шириной дочерних элементов.
А с помощью свойств flex-shrink и flex-grow Вы распределяете между элементами недостающее или свободное пространство родителя соответственно при его недостаче или избытке.

2) Также, данные свойства влияют на элементы одинаково при изменении главной оси со "строки" на "колонку". Если же Вы зададите элементам ширину, например, 50%, а потом измените flex-direction на column, элементы начнут выстраиваться в колонку (друг под другом), но их ширина станет лишь 30% от родителя.
Это же касается и свойства "flex-basis", которое имеет преимущество в определенных ситуациях перед "width".

3) Никто не запрещает использовать "width".

Подключите плагин, через commonJS или через import в ES6, к основному скрипту сборки.

Делаем просто:

Array.prototype.unique = function() {
  this.splice(0, this.length, ...new Set(this));
  return this;
};

Делаем сложно:

Array.prototype.unique = function(key = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  let numDeleted = 0;

  this.forEach(function(n, i, a) {
    a[i - numDeleted] = n;
    const k = getKey(n);
    numDeleted += this.has(k) || !this.add(k);
  }, new Set);

  this.length -= numDeleted;

  return this;
};


[ 1, 1, 1, 2 ].unique() // [1, 2]
[ { id: 3 }, { id: 1 }, { id: 1 }, { id: 3 } ].unique('id') // [{id: 3}, {id: 1}]
[ 'a', 'b', 'c', 'd', 'ab', 'bc' ].unique(n => n.length) // ['a', 'ab']

В самом коде можно менять. Либо создаете post type и к нему можно прикрутит плагин ACF для допопнительных полей, потом просто через админку в post type заходите.

Я делал похожие интерфейсы и я делал на Vue. По моему мнению именно на Vue такие вещи делаются быстрее всего.