In my experience, code should generally be more closely organized by function (this code used for the user dashboard’s analytics tab) rather than form (this code is a Vue component method). Colocation makes it much easier to walk through what happens when the user takes some action.
Colocation is a direct antithesis of React/NgRx-style breaking up of logic into monolithic action, effect, and reducer files: long
switch statements in reducer files tend to group disparate functionality into one file because they share the same form.
Does separating out templates into HTML files violate code colocation? Not necessarily, because you aren’t grouping HTML from multiple components in one HTML file. Keeping a separate `component.template.html` file as a sibling of `component.js` is fine so long as the `.template.html` file contains all the HTML for `component.js`, just the HTML for `component.js`, and nothing but the HTML for `component.js`.