title: Vuejs: method with v-if not working
body: <p>I think this might be a typo somewhere, but can't find the issue. I have this Vuejs template, that renders just fine if I remove the v-if verification. However when I use it, it does not render anything at all. Already placed a debugger both in return true, and return false, and the logic test returns true only once, as expected. Can anybody spot what am I doing wrong?</p>
  
  <pre><code>template: `
    &lt;div class="workbench container"&gt;
      &lt;ul class="collapsible popout" data-collapsible="expandable"&gt;
        &lt;collapsible-cards
          v-for="tipo, index in tiposCollapsibles"
          v-if="mostraApenasPerfilEspecificado(perfil, tipo)"
          v-bind:key=index
          v-bind:dados="tipo"
        &gt;
        &lt;/collapsible-cards&gt;
      &lt;/ul&gt;
    &lt;/div&gt;`,
  
  mounted: function() {
    for (key in this.tiposCollapsibles) {
      if (this.tiposCollapsibles[key].perfisQuePodemVer.indexOf(this.perfil) &gt;= 0) {
          this.queryTeleconsultorias(key);
      }
    }
  },
  
  methods: {
    mostraApenasPerfilEspecificado(perfil, tipo) {
      tipo['perfisQuePodemVer'].forEach(function(value) {
        if (perfil === value) {
          return true;
        }
      });
      return false;
    },
    ...
  </code></pre>
  
  <hr>
  
  <p><strong>Update:</strong> For anyone who is having the same problem, I ended up using a computed property, rather than a method itself. The v-if/-v-show behaviour to show/hide elements was moved to the computed property. In the end I was not sure if this was an issue with Vuejs. Here is the working code:</p>
  
  <pre><code>template: `
    &lt;div class="workbench container"&gt;
      &lt;ul class="collapsible popout" data-collapsible="expandable"&gt;
        &lt;collapsible-cards
          v-if="showTipoCollapsibles[index]"
          v-for="tipo, index in tiposCollapsibles"
          v-bind:key="index"
          v-bind:object="tipo"
        &gt;
        &lt;/collapsible-cards&gt;
      &lt;/ul&gt;
    &lt;/div&gt;`,
  
  mounted: function() {
    this.executeQuery(this.perfil);
  },
  
  computed: {
    showTipoCollapsibles: function() {
      let perfisVisiveis = {};
      for (tipo in this.tiposCollapsibles) {
        perfisVisiveis[tipo] = this.tiposCollapsibles[tipo].enabledForProfiles.includes(this.perfil);
      }
      return perfisVisiveis;
    },
  },
  
  methods: {
    executeQuery: function(value) {
      if (value === 'monitor') {
        var query = gql`query {
          entrada(user: "${this.user}") {
            id
            chamadaOriginal {
              datahoraAbertura
              solicitante {
                usuario {
                  nome
                }
              }
            }
            ...
  </code></pre>