Vuing order

There's a bug really disturb me today:

vue.js:1023 [Vue warn]: Unknown custom element <foobar>: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Looks easy, right? But I cannot find where the bug occurs, because it looks something like this:

import foobar from "./foobar.vue";

export default {
    components: {
        foobar
    },
    data() {},
    methods: {},
    components: {},
};

Yes, someone puts components instance at the bottom of component. In convention however, components instance should be on top.

I don't know what to say. Why linting tool doesn't tell me?

Anyway, by convention, you should order like this:

export default {
    // Side Effects
    el: "",
    // Global Awareness
    name: "",
    parent: "",
    // Component Type
    functional: false,
    // Template Modifiers
    delimiters: ["${", "}"],
    comments: false,
    // Template Dependencies
    components: {},
    directives: {},
    filters: {},
    // Composition
    extends: {},
    mixins: [],
    // Interface
    inheritAttrs: true,
    model: {},
    props: {},
    propsData: {},
    // Local State
    data() { return {}; },
    computed: {},
    // Events
    watch: {},
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    updated() {},
    activated() {},
    deactivated() {},
    beforeDestroy() {},
    destroyed() {},
    // Non-Reactive Properties
    methods: {},
    // Rendering (the declarative description of the component output)
    template: "",
    render (h) { return h(); },
    renderError (h, err) { return h("pre", { style: { color: "red" }}, err.stack) }
};