To answer your question on why it's not importing the component with your first approach. That's because the author decided to make it a plugin instead of importable component. (See Vue docs on plugin).

Such that when you do import on this component, it may be imported but never rendered since it's written without exporting the default module.

If you need to register this component by the import keyword, you could specify the complete path to the component file itself.

import JsonEditor from "vue-edit-json/src/JsonEditor";

new Vue({

  components: {
    JsonEditor
  }
    
}

And that should give you the same effect.

BTW, a quick tip for you:

When defining a component with PascalCase, you can use either case when referencing its custom element. That means both <my-component-name> and <MyComponentName> are acceptable.

So in your case, since you seem to want to have the components in kebab-case, you could drop the component "alias" name from the components object.

import VueJsonCompare from 'vue-json-compare';

components: {
  VueJsonCompare
}

// ...

<vue-json-compare :oldData="originalConfig" :newData="editedConfig"></vue-json-compare>

What kinda of modifications do you need? Chances are, when you need a very specific component, you should just code it yourself (maybe use this package as a base).