Warn when component option should be an object, but is not (#5605)

src/core/instance/state.js

@@ -60,6 +60,17 @@ const isReservedProp = {
   slot: 1
 }
 
+function parseObjectOption (vm: Component, option: Object, name: string) {
+  if (!isPlainObject(option)) {
+    process.env.NODE_ENV !== 'production' && warn(
+      `${name} should be an object.`,
+      vm
+    )
+    return {}
+  }
+  return option
+}
+
 function initProps (vm: Component, propsOptions: Object) {
   const propsData = vm.$options.propsData || {}
   const props = vm._props = {}
@@ -148,8 +159,8 @@ function getData (data: Function, vm: Component): any {
 const computedWatcherOptions = { lazy: true }
 
 function initComputed (vm: Component, computed: Object) {
+  computed = parseObjectOption(vm, computed, 'computed')
   const watchers = vm._computedWatchers = Object.create(null)
-
   for (const key in computed) {
     const userDef = computed[key]
     let getter = typeof userDef === 'function' ? userDef : userDef.get
@@ -213,6 +224,7 @@ function createComputedGetter (key) {
 }
 
 function initMethods (vm: Component, methods: Object) {
+  methods = parseObjectOption(vm, methods, 'methods')
   const props = vm.$options.props
   for (const key in methods) {
     vm[key] = methods[key] == null ? noop : bind(methods[key], vm)
@@ -235,6 +247,7 @@ function initMethods (vm: Component, methods: Object) {
 }
 
 function initWatch (vm: Component, watch: Object) {
+  watch = parseObjectOption(vm, watch, 'watch')
   for (const key in watch) {
     const handler = watch[key]
     if (Array.isArray(handler)) {

test/unit/features/options/computed.spec.js

@@ -48,6 +48,20 @@ describe('Options computed', () => {
     }).then(done)
   })
 
+  it('warn non object', () => {
+    new Vue({
+      computed: 'wrong'
+    })
+    expect('computed should be an object').toHaveBeenWarned()
+  })
+
+  it('don\'t warn when is an object', () => {
+    new Vue({
+      computed: {}
+    })
+    expect('computed should be an object').not.toHaveBeenWarned()
+  })
+
   it('warn with setter and no getter', () => {
     const vm = new Vue({
       template: `

test/unit/features/options/methods.spec.js

@@ -24,4 +24,18 @@ describe('Options methods', () => {
     })
     expect(`method "hello" has an undefined value in the component definition`).toHaveBeenWarned()
   })
+
+  it('should warn non object', () => {
+    new Vue({
+      methods: 'wrong'
+    })
+    expect('methods should be an object').toHaveBeenWarned()
+  })
+
+  it('don\'t warn when is an object', () => {
+    new Vue({
+      methods: {}
+    })
+    expect('computed should be an object').not.toHaveBeenWarned()
+  })
 })

test/unit/features/options/watch.spec.js

@@ -23,6 +23,20 @@ describe('Options watch', () => {
     }).then(done)
   })
 
+  it('warn non object', () => {
+    new Vue({
+      watch: 'wrong'
+    })
+    expect('watch should be an object').toHaveBeenWarned()
+  })
+
+  it('don\'t warn when is an object', () => {
+    new Vue({
+      watch: {}
+    })
+    expect('computed should be an object').not.toHaveBeenWarned()
+  })
+
   it('string method name', done => {
     const vm = new Vue({
       data: {