Angular.js service state reactivity in Vue 3 component computed property

[aadv-zygimantas]

Any tips how I can make angular.js services state reactive with Vue 3 computed property?

My service Slip:

import {
   ...
}

define(['angular'], function () {

  function SlipModel() {
      const Slip = {
          addedEvents: {},
          sliplineAdded(bet) {
                if (!Slip.addedEvents[bet.eventUUID][`${bet.market}|${bet.selection}`]) {   
                    Object.assign(Slip.addedEvents[bet.eventUUID], { [`${bet.market}|${bet.selection}`]: true })
                }
            }
      }
      
      return Slip;
  }

  return SlipModel;

})

This is how I register and export angular.js service:

import ng from 'angular'
import SlipModel from './slipModel'

export let Slip;

ng.module('app.slip', [])
    .factory('Slip', SlipModel)
    .run(/* @ngInject */ function($injector) {
	Slip = $injector.get('Slip')
});

In the Vue 3 component I import it:

import { Slip } from '../../slip/module';
Use it in computed value addedSelection:

computed: {
    addedSelection() {
      return Slip.addedEvents[this.kenoSchedule[0].eventUUID]
    },
  }

The main issue that I'm having is that it's not reactive in Vue 3 computed property, but in Vue 3 HTML template it actually is reactive - if service state changes, I can see those changes in HTML.

I tried to use reactive, toRef, register Slip service as plugin, but the computed value addedSelection just wont update after Slip.addedEvents has a new element pushed/removed.

[aadv-zygimantas]

I managed to solve my issue by wrapping angular.js service object with reactive:

import {
   ...
}

define(['angular'], function () {

  function SlipModel() {
      const Slip = reactive({
          addedEvents: {},
          sliplineAdded(bet) {
                if (!Slip.addedEvents[bet.eventUUID][`${bet.market}|${bet.selection}`]) {   
                    Object.assign(Slip.addedEvents[bet.eventUUID], { [`${bet.market}|${bet.selection}`]: true })
                }
            }
      })
      
      return Slip;
  }

  return SlipModel;

})

[jaredmcateer]

Hello sorry I have been a little preoccupied, I'm glad you found a solution. As you can see I also raised this in #24 and came up with the same conclusion. I'm not entirely sure this is an ideal fix but I haven't thought of anything better yet.