Почему при изменении переменной не меняется v-if vue?

Question

[vetsmen]

Есть данный компонент:

export default {
		name: 'main',
		data: () => ({
			authenticated: false
		}),
		mounted: () => {
			this.authenticated = true
		}
	}

При загрузке страницы authenticated должен меняться на true и блоки (v-if="authenticated"/v-else) меняться отображением. Если я делаю сразу authenticated: true, то блок отображается, если я меняю переменную authenticated в mounted, то v-if/v-else почему-то не реагирует. В чем проблема?

Answer 1

[Alexander Pushkarev]

Вот так надо

export default {
    name: 'main',
    data: () => ({
      authenticated: false
    }),
    mounted ()  {
      this.authenticated = true
    }
  }

Comments

[vetsmen]

Да нет, в документации это именно функция:

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

[Alexander Pushkarev]

vetsmen, я поправил код. Вы используете ES6, а там, то что вы написали перейдёт в

[vetsmen]

Alexander Pushkarev, спасибо. А чем по факту отличаются методы mounted и created?

[Alexander Pushkarev]

vetsmen, mounted срабатывает до загрузки страницы, а created после загрузки