Every now and then you just need a small component, one that's not worth an entirely new file:

// A small, secondary component
const SmallComponent = {
  // Create a component like you normally would
  data() {
    //...
  },
  computedProps: {
    //...
  },

  // Use the template property instead of a template block
  template: `
    <div>Hello!</div>
  `
};

// Your main component
export default {
  components: { SmallComponent },
  // ...
};

This is perfect for reusing code within a component, where a v-for doesn't work.

However, if the code is more complex or is likely to be used by other components, making a proper reusable component is the best way to go.

Export multiple components

You can also export multiple components by adding the export keyword:

export const SmallComponent = {
  // Create a component like you normally would
  data() {
    //...
  },
  computedProps: {
    //...
  },

  // Use the template property instead of a template block
  template: `
    <div>Hello!</div>
  `
};

To import this, you'll have to use a slightly different syntax:

import MainComponent, { SmallComponent } from './MultipleComponentsInOneFile.vue';

Note: You can get proper syntax highlighting of the HTML string using this VSCode extension.