Extend keys functionality

Hi, thanks for the great project…

I am looking to add some functionality that is not currently supported. I want to be able to distinguish different JSON key s… I want to do something like this…

<div @mousedown="onMouseDown">
   <vue-json-pretty :data="{ key: {test:  'value' } }"> </vue-json-pretty>
</div>

onMouseDown(e) {
  if (e.target.classList.contains('vjs-key')) {
    console.log(e.dataset.path); // ["key"]["test"] if clicking on test key
  }
}

There’s a few different approaches to do this:

1. Could add slot to render key
2. Could add a prop like customValueFormatter
3. Could add native support for this in the library

Happy to contribute implementation of this if we can agree on an approach

[leezng]

@mutdmour Thanks for your PR, it looks very nice. I like this feature. I have some suggestions before merging that you can take a look.

[mutdmour]

@leezng I have created PRs for both vue2 and vue3… Please review and let me know if any changes are needed