Clarify valid component data with regards to native objects.

[GirlBossRush]

The Vue API documentation states,

The object must be JSON-compliant (no circular references). You can use it just like an ordinary object, and it will look exactly the same when serialized with JSON.stringify. You can also share it between multiple Vue instances.

Vue will attempt to setup getters and setters via Object.defineProperty without checking if the object in question is enumerable.

Consider the following,

var AudioSpectrumVisualizer = {
  computed: function () {
    // Store a reference for convenience.
    // As of Vue 0.12.7, this is no longer functional in Safari.
    // Error: attempting to configurable attribute of unconfigurable property.
    this.canvas = this.$$.canvas.getContext('2d');
  },
  data: function () {
    return {
      canvas: null
    };
  },
  methods: {
    drawFrequency: function (frequency) {
      // ...
    },
    render: function () {
      // ...
    }
  },
  props: [
    'audio'
  ],
  template: "<canvas v-el='canvas'></canvas>"
};

I would like to see the documentation clarified,

...The object must be JSON-compliant (no circular references, must be enumerable)

Vue providing feedback would be helpful too,

[Vue warn]: Failed to resolve component: audio-spectrum-visualizer, 'canvas' is not enumerable.

Thank you!

[yyx990803]

Warning would be helpful, but I don't see why you need to put canvas in data here. If you just omit it from the initial data Vue won't try to observe it.

[GirlBossRush]

Thanks for the tip. In the example above, not using canvas in data is a great fix.