0xD34F

document.body.appendChild(new Component(...).$mount().$el);

<select v-model="selected">
  <option v-for="item in options" :value="item.value">
    {{ item.title }}
  </option>
</select>

data: () => ({
  selected: null,
  ...
}),
computed: {
  monthRate() {
    if (this.selected === 'year') {
      return this.percent / 12 / 100;
    } else if (this.selected === 'month') {
      return this.percent / 100;
    } else {
      return 0;
    }
  },
},

нужно, чтобы в зависимости от выбранной опции, функция срабатывала по разной формуле

monthRate() {
  return this.percent * this.selected / 100;
},

.dropdown-checkbox ul.opened {
  display: block;
}

<label @click="opened = !opened">click me</label>
<ul :class="{ opened }">
  ...

data: () => ({
  opened: false,
}),

<div id="content" v-on:hide="alert('ff')" >

<el-popover
  @hide="onHide"
  ...

methods: {
  onHide() {
    alert('HIDE');
  },
  ...

Метод alert есть

в root событие v-on:hide не ловится

1. Пробрасывать событие наверх по всей иерархии. Подписались на событие на popover'е, кинули такое же (или не совсем, имя лучше бы другое сочинить, а то в отрыве от своего источника выглядит слишком общим, непонятно, что это такое) - @hide="$emit('hide')"; подписались на событие в родителе, снова emit; ну и т.д., до корневого компонента (если что, в нём делать emit уже не надо, вместо него будет ваш alert).
   
2. Спускать вниз обработчик. В корне, на экземпляре компонента, внутри которого находится popover, подписываетесь на событие: @hide="alert". На всех уровнях ниже, включая popover, тоже, только обработчик берёте уже не из методов, а из того, что сверху передано - @hide="$listeners.hide" (или v-on="$listeners", если надо передавать вниз всё, или кроме hide больше ничего нет).
   
3. Можно воспользоваться ссылкой на корень.
   
   В компоненте, где создаётся экземпляр popover'а:
   
   

   <el-popover
     @hide="$root.$emit('popover-hide')"
     ...

   
   В корне:
   
   

   mounted() {
     this.$on('popover-hide', this.alert);
     ...

   
   
4. Шина событий: Vue.prototype.$eventBus = new Vue;. Этот способ самый гибкий - слушать события можно где угодно откуда угодно.
   
   Действуете аналогично предыдущему варианту, только emit/on вызываете у шины, а не корня:
   
   

   <el-popover
     @hide="$eventBus.$emit('popover-hide')"
     ...

   
   

   mounted() {
     this.$eventBus.$on('popover-hide', this.alert);
     ...

   
   
   

computed: {
  msg() {
    return this.$t('welcomeMsg');
  },
},

firebase.auth().onAuthStateChanged(user => {
  if (user) {
    store.dispatch('loggedUser', user);
  }

  new Vue(...);
});

mounted() {
  this.map = L.map(this.$refs.map).setView([ 55.75222, 37.61556 ], 13);
  ...

methods: {
  onClickRow(item) {
    console.log(item);
  },
  ...

new Vue({
  store: store,
  ...

new Vue({
  store: createStore(),
  ...

передавать параметры <...> оставив в computed

methods: {
  filterHeroes(attr) {
    const s = this.searchHeroesString.toLowerCase();
    return this.heroes.filter(n => n.hero_attribute === attr && n.name.toLowerCase().includes(s));
  },

data: () => ({
  active: false,
}),
created() {
  const onClick = e => this.active = this.$refs.block.contains(e.target) && this.active;
  document.addEventListener('click', onClick);
  this.$on('hook:beforeDestroy', () => document.removeEventListener('click', onClick));
},

<button @click.stop="active = !active">click me</button>
<div :class="{ active }" ref="block">hello, world!!</div>

state: {
  opened: null,
  ...

toggleNav(state, block) {
  state.opened = state.opened === block ? null : block;
},

closeSidebarPanel(state) {
  state.opened = null;
},

isPanelOpen(state) {
  return !!state.opened;
},

<span v-if="isPanelOpen">{{ $store.state.opened.bName }}</span>

<template #default="{ block }">
  <div class="sidebar-panel-settings">
    <div class="setting-block">
      {{ block.bName }}
    </div>
  </div>
</template>

<select v-model="selected">
  <option v-for="n in deliveryPrice" :value="n">{{ n.city }}</option>
</select>

<div v-if="selected">
  <div>{{ selected.city }}</div>
  <div>{{ selected.priceFrom }}</div>
</div>

<select v-model="city">
  <option v-for="n in deliveryPrice">{{ n.city }}</option>
</select>

computed: {
  selected() {
    return this.deliveryPrice.find(n => n.city === this.city);
  },
},

<select v-model="selectedIndex">
  <option v-for="(n, i) in deliveryPrice" :value="i">{{ n.city }}</option>
</select>

data: () => ({
  selectedIndex: -1,
}),

computed: {
  selected() {
    return this.deliveryPrice[this.selectedIndex];
  },
},

let index = -1;
setInterval(() => {
  index = (index + 1) % array.length;
  console.log(array[index]);
}, 500);

Показалось будет неудобно юзать в Вью компоненте. Мне надо при наведении мышки показывать по кругу картинки из массива и останавливать при убирании мышки.

<div
  @mouseenter="установитьИнтервал"
  @mouseleave="сброситьИнтервал"
>

methods: {
  установитьИнтервал() {
    this.interval = setInterval(() => { ... }, 666);
  },
  сброситьИнтервал() {
    clearInterval(this.interval);
  },
},

return this.$store.authInfo

:class="form.FirstName !== null ? form.FirstName ? 'input-successes' : 'input-error' : ''"

:class="{ 'input-successes': form.FirstName, 'input-error': form.FirstName === false }"

:class="form.FirstName !== null && [ 'input-error', 'input-successes' ][+form.FirstName]"

:class="({ true: 'input-successes', false: 'input-error' })[form.FirstName]"