Challenge 3: What "Framework-Aware Completion" Means for a .vue File — Solution Walkthrough

What framework-aware completion specifically means here:

Per this chapter's own material, WebStorm understands Vue's own
single-file-component syntax specifically — meaning completion works
correctly inside a .vue file's own template block, recognizing Vue's
own template syntax (directives, bindings, component tags) as
something distinct from plain HTML or plain JavaScript, and offering
completion suggestions that make sense within that specific structure.

Why this differs from generic JavaScript completion applied to a
.vue file:

Generic JS completion would only understand standard JavaScript syntax
— it would have no specific awareness of Vue's own template block, its
own directive syntax, or how a .vue file's script and template
sections relate to each other. Applying generic completion blindly to
a .vue file would either fail to offer useful suggestions inside the
template block at all, or offer suggestions that don't actually apply
to Vue's own specific template syntax.

Why this is a meaningful, not cosmetic, difference:

Framework-aware completion means WebStorm has actually built specific
understanding of Vue's own file format and syntax rules into its
tooling — the same category of purpose-built support this chapter
already described for JSX (React) and Angular templates — rather than
stretching one generic JavaScript-completion engine to loosely cover
files it wasn't specifically designed to understand.

WHY THIS WORKS AS AN ANSWER
------------------------------
This exercise checks that "framework-aware" is understood as genuine,
purpose-built support for a specific framework's own file format and
syntax, not simply generic language completion that happens to run
inside a file with a particular extension.