LJ322

Чаще всего такую фильтрацию делают через чекбоксы. Можете сделать по аналогии, только с заменой поиска на чекбоксы

Typescript подключается либо через vue-cli при создании проекта, либо можно добавить в уже созданный проект через менеджер пакетов. Как вам удобно
https://vuejs.org/guide/typescript/overview.html#o...

@click.stop не подойдёт? Поставьте его в тот элемент, который глубже находится, чтобы событие с него выше не всплывало

Обращайтесь к ним либо внутри метода

someFunction(el) {
  console.log(this.str)
}

либо в аргумент кидайте, когда метод вызываете someFunction(this.str)

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

Прокидываете событие из Header выше, а в App отслеживаете его и дальше обрабатываете как вам нужно
https://codesandbox.io/s/easy-vue-js-search-forked...

Смотря как работаете с файлами на проекте. Можно подключать через /assets


Можно так же поместить их в /static, оттуда они не будут попадать в сборщик
Видел оба варианта на практике, разницу особо не ощутил.

Через computed свойство

<template>
  <header :class="pageClass">
...
  </header>
      <router-view/>
  <footer :class="pageClass">
...
  </footer>
</template>

<script>
export default {
  computed: {
    pageClass() {
      return {
        'page-class': this.$route.path === '/page',
      }
    }
  }
}
</script>

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

<template>
  <div class="home">
    <img 
      alt="Vue logo" 
      src="../assets/logo.png"
    >
    <Modal
      v-if="modalOpen"
    >
      <div 
        v-html="someData"
      ></div>
    </Modal>

    <button 
      @click="modalIsOpen = !modalIsOpen"
    >
      Переключатель модалки
    </button>
  </div>
</template>

<script>
import Modal from '@/components/Modal.vue'
import { ref } from 'vue';

export default {
  name: 'Home',

  components: {
    Modal,
  },

  setup() {
    const modalIsOpen = ref(true);
    const someData = 'some data...';

    return { modalIsOpen, someData };
  },
}
</script>

Непосредственно за импорт в однофайловые компоненты отвечает vue-loader. А так да, импорт стилей, svg и т.д. обрабатывают соответствующие загрузчики вебпака

Есть удобный механизм transitions - Анимации на Vue