There's nothing to be embarrassed by 🙂
What interests me more is why did you think using an object instead of a function or vice versa should have worked in any of those properties. Dev warnings are cool but they do have a cost to maintain and at execution too. I thought the docs covered that quite well

ping @phoenixeliot

It's less a lack of understanding and more going through the boilerplate a little too fast, and then later on when actually using the options, things fail in ways that aren't clear.

When making a new component, I'll just throw in the common options to start with, then fill them out later, just to take the mental overhead out of remembering exactly what they're called. (We haven't been using Vue for terribly long, so I don't have them down by heart yet).

Also, side note: We use CoffeeScript. But I think in ES6 notation it could look pretty similar.

So I'll throw together a new component and it'll look something like this (when done right):

SomeComponent =
  name: 'some-component'
  template: require('templates/some-component')()
  storeModule: SomeStoreModule
  props: {}
  data: ->
  computed: {}
  watch: {}
  components: {}
  methods: {}
  created: ->
  destroyed: ->

And it's easy to not notice if I put a -> instead of a {} on one of those that should have a {}, because it works perfectly fine for now — it just breaks when I try to actually use them. Say I'd had a -> on watch:

SomeComponent =
  name: 'some-component'
  template: require('templates/some-component')()
  storeModule: SomeStoreModule
  props: {}
  data: ->
    bar: "yay"
  computed: {}
  watch: ->
    bar: ->
      console.log(@bar)
  components: {}
  methods: {}
  created: ->
  destroyed: ->

But then when I change bar, the watcher just... doesn't run. And it's not super obvious that this is the reason why. It always feels like a gotcha when I eventually figure it out.

Also note: This usually happens like, the next day, when I'm adding some new functionality, and thus don't have the boilerplate fresh in my head and am (erroneously) assuming it works because I hadn't seen any problems.

you must put your data inside bracket and then return it

like this:
data(){
return{
names:["ali","ahmad","Raza]
}
}

What interests me more is why did you think using an object instead of a function or vice versa should have worked in any of those properties

If properties that needed to be functions had verb prefixes e.g. createData instead of data then there would be little to no confusion. What would be even better is if vue got rid of this inside their functions and just added it as another parameter - then its documentation could remove all those warnings about what functions do and don't support this. Additionally there would be fewer invalid bugs reported.