VueJS вычисленное свойство с использованием логического свойства не обновляется

Question

У меня есть компонент Vue (2.6.11 через Nuxt), который получает логическое свойство от своего родителя и использует его для вычисления дополнительных вычисляемых свойств. После первоначального рендеринга все значения отображаются должным образом. Однако, когда родитель переворачивает значение переданного свойства, в этом компоненте изменяются только некоторые значения. В частности, DIV, привязанные непосредственно к свойству, и original подходят, но flipped и stringed никогда больше не изменяются.

Назначение исходного свойства локальному var перед любой оценкой в ​​вычисляемом свойстве функция не влияет на результат.

Изменение вычисленных свойств на методы тоже не решает проблему. Правильно обновляются только первые два.

Обратите внимание, что приведенный ниже код сокращен до минимума, чтобы продемонстрировать проблему.

<template>
  <div class="x">
    <div class="y">
      <div class="x">
        <div>{{ flag }}</div>
      </div>
      <div class="x">  
        <div>{{ original }}</div>
      </div>  
      <div class="x">  
        <div>{{ flipped }}</div>
      </div>  
      <div class="x">  
        <div>{{ stringed }}</div>
      </div>  
    </div> 
  </div>    
</template>

<script>
export default {
  name: "FlagBox",
  props: { 
    "flag": {
      type: Boolean
    }
  },
  computed: {
    original: function() {
      return this.flag;
    },
    flipped: function() {
      return !this.flag;
    },
    stringed: function() {
      return this.flag ? "yes" : "no";
    }
  }
}
</script>

Что мне не хватает? Спасибо.

Answer 1

Мне не удалось воспроизвести проблему, но я предполагаю, что используемый вами переключатель выдает строковое значение (например, «false» вместо false), что делает его истинным, даже если это не так. Пожалуйста, проверьте свои реквизиты с помощью vue devtools, чтобы проверить передаваемый тип данных. Другого возможного объяснения этому нет, код вроде в порядке.