Is v-editable broken with Nuxt?


I’m trying to use v-editable (it used to work perfectly) but now I’m getting very strange results. I have created a simple Nuxt page just to test this, with index like so:

  <div v-editable="story">
    <h1>{{ story.editable }}</h1>

and the usual mounted and async data as described here:

When I click the element in the Storyblok editor I get an frame that is offset, with the page template as label and nothing happens. I'm obviously doing something wrong here but can't figure it out. Any help would be highly appreciated. 


I figured out what I was doing wrong. To make the visual editor working properly you have to handle content as a components, not fields. For some content this is not practical but most can be structured this way.

The offset of the frame was due to the style position: relative on the body element.
In addition you have to be careful when applying global button styles, they will be picked up by the visual editor.