Promise hide show bug

app.html

<script type="text/stache" id="component">
{{#if show}}
  {{#each data as obj}}
  <p>{{obj.value}}</p>
  {{/each}}

  <p ($click)="refresh">refresh</p>
  {{#if promise.isPending}}is pending{{else}}not pending{{/if}}

  {{#if data}}<p>we have data {{data.length}}</p>{{/if}}

  {{#if promise.isResolved}}
  <p>resolved</p>
  {{/if}}
  {{/if}}

<p ($click)="toggleShow">Toggle Show</p>

</script>


<script src="./node_modules/steal/steal.js" main="@loader">
  import DefineMap from 'can-define/map/map';
  import stache from 'can-stache';
  import 'can-stache-bindings';
  const I = DefineMap.extend({
    show: {
      value: true
    },
    promiseCounter: {
      value: 0
    },
    promise: {
      get(){
        const count = this.get('promiseCounter');

        return new Promise((resolve) => {
          setTimeout(() => {
            console.log('resolving!');
            resolve([{
              value: 10
            }, {
              value: count
            }]);
          }, 1000);
        });
      }
    },
    data: {
      get(val, set){
        this.promise.then(set);
      }
    },
    toggleShow(){
      this.show = !this.show;
    },
    refresh(){
      this.promiseCounter ++;
      console.log(this.promiseCounter)
    }
  });

  document.body.appendChild(stache.from('component')(new I()));


</script>