@politicalwatch/tipi-uikit 1.9.1 → 1.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@politicalwatch/tipi-uikit",
-  "version": "1.9.1",
+  "version": "1.9.2",
   "main": "src/components/index.js",
   "scripts": {
     "dev": "vite",

package/src/components/TwoCircles/TwoCircles.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from 'vue';
+import { ref, toRef, onMounted, watch } from 'vue';
 import { select } from 'd3-selection';
 import { transition } from 'd3-transition';
 
@@ -18,6 +18,9 @@ const { selection, styles, topic } = defineProps({
   topic: String,
 });
 
+const selectionRef = toRef(selection);
+const topicRef = toRef(topic);
+
 const twoCirclesRef = ref(null);
 
 const loadVizz = () => {
@@ -31,10 +34,10 @@ const loadVizz = () => {
   let maxRadius = 150;
   let minRadius = 5;
 
-  let mainTopic = topic;
-  let data = [selection.selected];
-  let maxName = selection.compareswith._id;
-  let maxNumber = selection.compareswith.initiatives;
+  let mainTopic = topicRef.value;
+  let data = [selectionRef.value.selected];
+  let maxName = selectionRef.value.compareswith._id;
+  let maxNumber = selectionRef.value.compareswith.initiatives;
   let mainColor = styles.topics[mainTopic] ? styles.topics[mainTopic].color : styles.defaultColor;
   let maxColor = styles.topics[maxName] ? styles.topics[maxName].color : mainColor;
 
@@ -115,7 +118,7 @@ onMounted(() => {
   loadVizz();
 });
 
-watch(selection.selected._id, () => {
+watch(selectionRef.value.selected._id, () => {
   loadVizz();
 });
 </script>