fix(example): "head property in component must be a function"

[suhrmann]

Fix example "SEO HTML Head"

The codestyle for head of nuxt examples: SEO HTML Head and nuxt api: API: The head Method differ.
Further on Nuxt.js @ v2.12.x I got the obove mentioned error.

[codecov-commenter]

Codecov Report

Merging #7601 into dev will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##              dev    #7601   +/-   ##
=======================================
  Coverage   70.26%   70.26%           
=======================================
  Files          88       88           
  Lines        3747     3747           
  Branches     1020     1020           
=======================================
  Hits         2633     2633           
  Misses        905      905           
  Partials      209      209           

Flag	Coverage Δ
#unittests	70.26% <ø> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 56b158e...9c59482. Read the comment docs.

[pimlie]

Thanks for your contribution. head only needs to be a function if you use any (reactive) component properties, as this example doesnt use those it should be fine to just use an object.

When exactly did you get this error? After running lint? Or is it a typescript error?

[suhrmann]

It was lining, but with an error that prohibited build.
I was just confused that these 2 docs pages show different notation, one causing an error in my code.

With your explanation I think, I can close this PR.

[pimlie]

If you are using eslint-plugin-nuxt, I have reported this behaviour in this issue: nuxt/eslint-plugin-nuxt#93 which was fixed by removing the rule from nuxt/recommended. So either you might need to upgrade eslint-plugin-nuxt or you have added the rule locally?

[suhrmann]

To check I completely disabled buildModule @nuxtjs/eslint-module:

Result

• For Nuxt itself (without eslint) it does not matter if I use object or method notation. It works!
• If I enable eslint, the above mentioned error "head [...] must be a function" prohibits the build

Here are my packages of the troubling project - latest with yarn upgrade:

$ npm list --depth=0
my-project@1.0.0
├── @fortawesome/fontawesome-free@5.13.1
├── @nuxtjs/eslint-config@2.0.2
├── @nuxtjs/eslint-module@1.2.0
├── @nuxtjs/vuetify@1.11.0
├── babel-eslint@10.1.0
├── eslint@6.8.0
├── eslint-plugin-nuxt@0.5.2
└── nuxt@2.13.1

UPDATE: Solution 🥳

Manually overriding the package versions of my real project ⬆️ with latest ones of the test project ⬇️ fixed the linting error. But somehow yarn upgrade did not use these versions 🤨

---

I just tested it on a new test-project: Here is the problem fixed (with eslint object and method notation work):

$ npm list --depth=0
TEST@1.0.0 /TEST
├── @nuxtjs/eslint-config@2.0.2
├── @nuxtjs/eslint-module@1.2.0
├── @nuxtjs/vuetify@1.11.2
├── babel-eslint@10.1.0
├── eslint@6.8.0
├── eslint-plugin-nuxt@1.0.0
└── nuxt@2.13.2