Add another cause for unexpected token error (#36624)

* add method property 

Confusing error if a method name is not followed by `()` but by `:`

* Update index.md

* Update index.md

---------

Co-authored-by: Joshua Chen <[email protected]>

Author: kingma-sbw

files/en-us/web/javascript/reference/errors/unexpected_token/index.md

@@ -90,6 +90,28 @@ function round(n, upperBound, lowerBound) {
 }
 ```
 
+### A structure error further up confused the meaning
+
+Sometimes, the error is caused by some structure issues not directly next to the error location, so you need to look around for potential errors. For example, you intended to declare a method of an object, but you declared it as a propety instead:
+
+```js-nolint example-bad
+const MyComponent = {
+  mounted: {
+    document.getElementById("app").classList.add("loaded");
+  }
+}
+```
+
+The `.` after `document` is unexpected, because JavaScript is parsing the `{}` as an object literal instead of a function body, so it expects a `:`. The problem is solved by declaring `mounted` as function.
+
+```js-nolint example-good
+const MyComponent = {
+  mounted() {
+    document.getElementById("app").classList.add("loaded");
+  }
+}
+```
+
 ## See also
 
 - {{jsxref("SyntaxError")}}