0xD34F

Булево свойство, используете его в v-if, по клику переключаете значение:

data: () => ({
  show: false
})

<button @click="show = !show">{{ show ? 'hide' : 'show' }}</button>
<my-component v-if="show"></my-component>

https://jsfiddle.net/5L4phtua/

UPD. Для того, чтобы показывать несколько экземпляров - массив и v-for:

data: () => ({
  items: []
}),
methods: {
  add() {
    this.items.push(...);
  }
}

<button @click="add">add</button>
<my-component v-for="n in items"></my-component>

https://jsfiddle.net/5L4phtua/1/

У вас же есть объект, который вы хотите перезаписать - можно просто найти его индекс в массиве:

const fileIndex = this.files.indexOf(fileInArr);
this.$set(this.files, fileIndex, response.data);

data: () => ({
  value: '',
  error: false
}),
methods: {
  checkValue() {
    this.error = в зависимости от this.value;
  }
}

<input v-model="value" :class="{ error }" @blur="checkValue">
<span v-show="error">ошибка</span>

.error {
  border-color: red;
}

https://jsfiddle.net/ujr0bgLv/

Как можно его подключить в проект без использования webpack, vue-cli?

"Подключить" - никак (по крайней мере, в документации иных способов кроме как с использованием сборщиков не упоминается). Можно разве что утащить исходники, и... Вот. Это, разумеется, дикость. Освойте лучше vue-cli - там нет ничего сложного.

UPD [Дописано сильно позднее]. Появилась возможность подключить через cdn. Например.

v-model

При необходимости обновить значение путём записи свойства value у поля ввода, после собственно установки значения, надо будет отправить ему событие input, которое слушает v-model:

input.value = какое-то значение;
input.dispatchEvent(new Event('input'));

Вот так. Данные строки таблицы доступны через параметры слота. Например (кнопка Info).

почему то, выводятся данные в виде undefined

Да понятно почему - вы ничего не возвращаете из метода getFriends.

То есть, должно быть так:

getFriends() {
  return Vue.axios.get(...

Использовать, соответственно, как-то так:

this.$friends.getFriends().then(friends => console.log(friends))

Контекст потеряли. Так что this в then/catch - это не экземпляр компонента, а window (или undefined - в строгом режиме).

Используйте стрелочную функцию:

.then((response) => {
  this.loading = false;
  console.log(response);
})

Или bind:

.then(function(response) {
  this.loading = false;
  console.log(response);
}.bind(this))

Или сохраняйте контекст в переменную перед запросом:

var that = this;
axios.post('/comment', {
  text: this.com_text,
}).then(function(response) {
  that.loading = false;
  console.log(response);
})

Или сделайте метод асинхронным и вместо then используйте await:

methods: {
  async add_comm() {
    this.loading = true;

    try {
      var response = await axios.post('/comment', {
        text: this.com_text
      });

      console.log(response);
    } catch(error) {
      console.error(error);
    }

    this.loading = false;
  }
}

Или вынесите код коллбеков в отдельные методы (vue самостоятельно привязывает контекст к методам):

methods: {
  add_comm() {
    this.loading = true;

    axios.post('/comment', {
      text: this.com_text
    })
      .then(this.onResponse)
      .catch(this.onError)
      .finally(this.onFinal);
  },
  onResponse(response) {
    console.log(response);
  },
  onError(error) {
    console.error(error);
  },
  onFinal() {
    this.loading = false;
  }
}

Добавьте специфичности селектору, объявленному в родителе.

<div :class="`profile ${userdata.auth_service}`">

или

<div :class="[ 'profile', userdata.auth_service ]">

или

<div class="profile" :class="userdata.auth_service">

Вместо :src="getImgUrl(diaryIcons) сделайте :src="getImgUrl(icons).

Соответственно, в методе getImgUrl избавьтесь от цикла:

getImgUrl(icon) {
  var images = require.context('../../../../assets/icons/', false, /\.png$/)
  return images('./' + icon.name + '.png')
}

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

<input @focus="focused = true" @blur="focused = false">
<span v-show="focused">FOCUSED</span>

https://jsfiddle.net/mc69wnwu/

А более полный вариант кода можно увидеть? Где вы определяете setCenterFunc? - судя по тому, что вы показали, она явно не в methods лежит.

И здесь idUser не работает, только после перезагрузки страницы.

Ну так наверное надо бы на страницу Feed переходить после того, как пользователь будет сохранён в localStorage. Т.е., this.$router.push({name: 'feed'}) следует выполнять в колбеке запроса получения данных пользователя.

Также, почему-то я не могу получить из localstorage 'user' - пишет '[object Object]'.

Неудивительно. Ведь это объект. При сохранении в localStorage делайте JSON.stringify, а когда достаёте - JSON.parse.

Свойство checked сделать массивом, который будет содержать состояния чекбоксов. Сами чекбоксы на основе этого массива и создавать, через v-for. Слушать событие change, по которому выставлять состояния предыдущих чекбоксов (относительно того, на котором событие случилось) в true, следующих в false:

data: () => ({
  checked: [ 0, 0, 0, 0, 0 ],
}),
methods: {
  onChange(e, index) {
    const checked = e.target.checked;

    this.checked = [
      ...Array(index + checked).fill(1),
      ...Array(this.checked.length - index - checked).fill(0),
    ];
  },
},

<li v-for="(n, i) in checked">
  <label>
    <input
      type="checkbox"
      :checked="n"
      @change="onChange($event, i)"
    >
    {{ i + 1 }}
  </label>
</li>

UPD. Вынесено из комментариев:

а если несколько таких списков будет

Очевидно, нужен отдельный массив checked для каждого списка (если только вы не хотите, чтобы все списке выглядели одинаково). Что касается функции onChange, то надо будет добавить ей дополнительный параметр - чтобы была возможность указывать, с каким именно списком в данный момент идёт работа.

https://jsfiddle.net/9ba682w4/

Так?

UPD. Как победить тормоза при большом интервале значений. Можно работать с интервалом, который не будет вызывать тормозов - уменьшить границы в 100 раз, например. А в полях ввода показывать настоящие значения. Ну а то, что таким образом станет заведомо невозможной точная настройка значений посредством слайдера - так она в любом случае невозможна для больших интервалов. В общем, вот примерчик того, как это можно сделать.

UPD. В более поздних версиях рендеринг был переделан, больше никаких тормозов.

Миксины.

Потому что this внутри метода toggle - это не экземпляр vue. Не надо всюду пихать стрелочные функции.

Замените toggle: () => { на toggle() {.

this.dataCalendar.curMonth++

this.dataCalendar.curYear--

Страшно на такое смотреть. И ещё эти условия - curMonth < 11, curMonth > 0... Изменился месяц - надо поменять день (или не надо?), надо поменять год (или не надо - по-всякому бывает), поменять ещё чёрт знает что. Увеличили день - надо менять месяц, если это 30/31 число, иногда год - если было 31 декабря. Ну и т.д. и т.п.

Почему бы непосредственно не изменять ТОЛЬКО свойство даты - а все остальные пусть пересчитываются при изменении curDate? Вместо curMonth++ будет что-то вроде

curDate = new Date(curDate.setMonth(curDate.getMonth() + 1))

А остальные свойства из обычных станут вычисляемыми:

computed: {
  calendarData() {
    return {
      year: this.curDate.getFullYear(),
      month: this.curDate.getMonth(),
      // ...
    };
  }
}

Часть начального кода с v-for я пропустил.

Это зря - непонятно, что такое date и types.

Предположу, что вам следует заменить это:

types.id == date.activities[i].type_id

на вот это:

date.activities.every(n => n.type_id == types.id)