RaulDuke

Если функция используется единожды и является неотъемлемой частью компонента, то очевидно, что она должна быть методом компонента.

Если планируется использовать этот метод в других компонентах, то нужно смотреть на контекст, т.е. что это за функция и куда она подходит логически. Возможно стоит вынести в отдельный компонент, возможно в библиотеку хелперов, а может и в фильтры.

Добрый день.

<div id="app" @scroll="letsScroll = true" :class="letsScroll && '_scrolled'">

https://jsfiddle.net/olegcvetkov76/hjvh2n76/

Подумайте в сторону универсального компонента для инпута.

Что-то такое:

<template>

    <input type="text"
      :placeholder="placeholder"
      :value="value"
      @input="onchange">
    <app-transition type="toggleDown">
      <div>{{ notify }}</div>
    </app-transition>
</template>

<script>
  export default {
    name: 'app-input',
    props: ['type', 'value', 'placeholder'],
    computed: {
      notify() {
        let text = 'Поле может содержать только ';
        return ( this.type === 'tel' &&  text + 'цифры' )
            || ( this.type === 'page' && text + 'латинские буквы, цифры (не менее 6 символов)' )
            || ( this.type === 'name' && text + 'русские и латинские буквы, цифры (не менее 3 символов)' )
      },
      validation(value) {
        return {
          tel: (/^[0-9]+$/).test(this.value) || !this.value.length,
          page: (/^[a-z0-9]+$/i).test(this.value) && this.value.length > 5,
          name: (/^[a-zа-яA-ZА-Я0-9 ]+$/i).test(this.value) && this.value.length > 3
        }
      }
    },
    methods: {
      onchange(e) {
        if ( this.validation[this.type] ) {
          this.$emit('input', e.target.value);
        }
      }
    }
  }
</script>

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

Я, в зависимости от ситуации (если нужна связь в обе стороны, например), бывает творю такое "хулиганство":

<product :key="product.id"
  v-for="product in $parent.products"
  v-model="product">
</product>

Компонент:

<template>
<div class="product" data-product-id="value.id"  @click="onChecked" >
  <!-- product template -->
</div>
</template>

<style>
.product { /** some thing **/ }
</style>

<script>
export default {
  name: 'product',
  props: ['value'],
  methods: {
    onChecked() {
      this.$emit('input', this.value.id);
    }
  }
}
</script>

Добрый день, я делаю так:

<router-link tag="li" :to="{ name: 'user', params: { id: user.id } }" :class="$style.dropdown__item">

const router = new VueRouter({
  mode: 'history',
  linkActiveClass: '_active',
  routes: [
    { path: '/users/:id', component: require('./components/Profile.vue'), name: 'user' }
  ]
});