vue-routerのbeforeEachを書く場所

Question

vue-routerにてbeforeEachを使う場合、以下のように使われるかと思います。

const router = new Router({
  routes: [...]
})

router.beforeEach((to, from, next) => {
  ...
})

export default router

これできちんと動いているので問題はないのです。
しかし、私は初めvue-cliからできるひな形(以下のbeforeEachの部分を書いていない状態)にbeforeEachメソッドを追加すればいけるやろ、と思って以下のようにやってみましたがうまくいきませんでした。

export default new Router({
  routes: [...],
  beforeEach (to, from, next) => {
    ...
  }
})

VueだけでなくJavaScriptに関しても初心者のため、なぜ下がうまく動かないのかがよくわからないのです。
ご教授いただけませんか。よろしくお願いいたします。