annotorious-OSD in vue 3

[ferropasha]

I am trying to use annotorious-osd combination in a vue 3 app. It works to some extent but with some strange limitations. I can successfully import both OSD and annotorious-osd, then create annotorious instance, passing OSD object as a parameter. Adding annotations via anno.loadAnnotations() or by drawing them by hand is also possible, but then there are the problems.

1. Any annotations that can be added programmatically via loadAnnotations() method are impossible to interact with, clicking on the selection box doesn't do anything
2. Annotations added manually are clickable, draggable and resizable but I can't draw more than one at a time, and if I delete it later it is impossible to draw new one unless I reload the page.

I realize that it is probably more of a vue-related problem rather than annotorious-osd one, but nevertheless if anyone can offer some advice I would be very grateful to hear it. Below is full code of my vue 3 component.

<template>
  <div>
    <div style="width:100%; height:800px;" id="viewer-image" ref="image"/>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import OpenSeadragon from "openseadragon";
import OSDAnnotorious from '@recogito/annotorious-openseadragon';
import '@recogito/annotorious-openseadragon/dist/annotorious.min.css';

export default defineComponent ({
  name: 'HelloWorld',
  data(){
  return{
  anno: null,
  viewer:null,
  options:{
   disableEditor: false,
   disableSelect: false
   },
  duomo: {
		Image: {
			xmlns: "http://schemas.microsoft.com/deepzoom/2008",
			Url: "//openseadragon.github.io/example-images/duomo/duomo_files/",
			Format: "jpg",
			Overlap: "2",
			TileSize: "256",
			Size: {
			Width:  "13920",
			Height: "10200"
			}
		}
  }
  }
  },
  mounted() {
    this.initViewer();
  },
  methods:{
  initViewer(){
  this.viewer=OpenSeadragon({
        id: "viewer-image",
        prefixUrl: "//openseadragon.github.io/openseadragon/images/",
        tileSources: this.duomo,
        showNavigator: false
        });
        this.anno = OSDAnnotorious(this.viewer, this.options);
        this.anno.setDrawingEnabled(true);
        this.anno.loadAnnotations('http://localhost:3000/api/test_annot2');
        this.anno.on('createAnnotation', function (annotation) {
          console.log('Created annotation', annotation);
        });
        this.anno.on('updateAnnotation', function (annotation) {
          console.log('Updated annotation', annotation);
        });
  }
}


})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

</style>

[WilhelmWeber]

As to 2nd problem, probably you need to hold SHIFT key while clicking and dragging the mouse to create a new annotation. I tried to use annotorious-osd in environment similar to yours, but it worked without problems.
https://annotorious.github.io/getting-started/osd-plugin/