Почему мой параметр data в Stuebook Vue.js не переопределяет данные компонента?

Question

У меня есть следующий компонент, предназначенный для минимального воспроизведения этой проблемы:

<template>
  <div>
    foo is: {{foo}}
  </div>
</template>

<script>

export default {
  name: 'demo',
  data: function() {
    return {
      foo: 'bar',
    }
  },
}
</script>

<style scoped>

</style>

с соответствующей историей:

import { storiesOf } from '@storybook/vue';
import fetchMock from 'fetch-mock';

import Demo from '../src/components/Demo';

storiesOf('Demo', module)
  .add('default', () => {
    return {
      components: {Demo},
      template: '<div style="width: 500px"><Demo/></div>',
    }
  })
  .add('foo is baz', () => {
    return {
      components: {Demo},
      template: '<div style="width: 500px"><Demo/></div>',
      data: () => ({
        foo: 'baz',
      }),
    }
  });

Как видно из этого снимка экрана, значение«foo» в компоненте не обновляется до «baz», хотя я указал data как функцию в возвращаемом значении из истории. Что не так?