I hope this aligns somewhat with your original vision.

If I've grasped the concept correctly, you were aiming to establish 'computed properties' (or getters of sorts) named longestLength and timestampForLongest for each worm. These properties would be based on the measurements within the state.

To tackle this, I've transformed each worm into a Vue instance. While this approach involves other functionalities provided by a Vue instance that are unnecessary here, Vue 2 lacks the ability to selectively extract specific components. Vue 3 might offer more modularity in this aspect, as per rumors. The key components we require are observable data (feasible through Vue.observable) and computed properties (solely accessible via a Vue instance). As a sidenote, this mirrors how Vuex operates behind the scenes—by creating a distinct Vue instance and linking it to the data, computed functions, etc..

The subsequent code may appear lengthy; however, a significant portion is dedicated to generating appropriate test data. Initially, data with nested measurements under the worms is generated before restructuring it conforming to your specified format within my mutation function. Prior to being added to the state, every entry inside worms is converted into a Vue instance.

To highlight critical sections amidst the complexity, I've marked them with // This bit is important comments.

Here's a unique approach for you to consider: 1. Steer clear of sorting whenever possible 2. Opt for storing properties such as max_length and max_time within each worm object, updating them with new observations instead

This method eliminates the need for sorting each time.

The code you gave contains syntax errors that needed to be fixed:

const states = {
  worms: {
    3: {
      id: 3,
      name: 'Slurms McKenzie',
      measurements: [1, 6, 9]
    },
    4: {
      id: 4,
      name: 'Memory worm',
      measurements: [3, 4, 12]
    },
    6: {
      id: 6,
      name: 'Alaskan Bull Worm',
      measurements: [5, 7, 14]
    }
  },
  measurements: {
    1: {
      id: 1,
      length: 5.2,
      timestamp: 'ts1'
    },
    2: {
      id: 2,
      length: 3.4,
      timestamp: 'ts2'
    },
    3: {
      id: 3,
      length: 5.4,
      timestamp: 'ts3'
    },
  }
}

const store = new Vuex.Store({
  state: states,
  getters: {
    getWorms: state => {
      return state.worms
    },
    getLongestLengthByMeasurementId: state => ids => {
      const mapped = ids.map(id => {
        const measurement = state.measurements[id]
        if (measurement) {
          return {
            length: measurement.length || 0,
            timestamp: measurement.timestamp || 0
          }
        } else {
          return {
            length: 0,
            timestamp: 0
          }
        }
      })
      return mapped.find(item => item.length === Math.max.apply(null, mapped.map(item => item.length))).timestamp
    }
  },
  mutations: {
    // setting timestamp in store.state.worms[wormId]
    setLongestLength(state, wormId) {
      if (state.worms[wormId] && typeof state.worms[wormId].timestamp !== 'undefined') {
        // update the timestamp
      } else {
        // get and set the timestamp 
        const ts = store.getters.getLongestLengthByMeasurementId(state.worms[wormId].measurements)
        Vue.set(state.worms[wormId], 'timestamp', ts)
      }
    },
  },
  actions: {
    // set timestamp worm by worm
    setLongestLength({
      commit
    }, wormId) {
      Object.keys(store.getters.getWorms).forEach(key =>
        commit('setLongestLength', parseInt(key, 10))
      )
    }
  }
})

const app = new Vue({
  store,
  el: '#app',
  mounted() {
    store.dispatch('setLongestLength')
    console.log('worms', store.state.worms)
  }
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
  <div v-for="worm in $store.state.worms">Timestamp by worm (ID {{worm.id}}): {{worm.timestamp}}</div>
</div>

To have a more efficient getter with both a get and set function, simply add get: before your getter function.

When I develop a Vue application with a substantial amount of data similar to yours, my approach usually involves organizing the data like this:

const vm = new Vue({
  data() {
    return {
      worms: [
        {id: 1,name: "Slurms McKenzie",measurements: [1, 6, 9]},
        {id: 2,name: "Memory worm",measurements: [3, 4, 12]},
        {id: 3,name: "Alaskan Bull Worm",measurements: [5, 7, 14]}
      ],

      measurements: [
        {id: 1,length: 5.2,timestamp: 123},
        {id: 2,length: 3.4,timestamp: 456},
        {id: 3,length: 5.4,timestamp: 789}
      ]
    };
  },

  computed: {
    sortedByLength() {
      return [...this.measurements]
        .sort((a, b) => a.length - b.length)
        .map(measurement => measurement.id)
        .map(id => this.worms.find(worm => worm.id === id));
    },

    timestampForLongest() {
      return this.sortedByLength[0].timestamp;
    }
  }
});

In Vue, computed properties are automatically updated when they change and cached otherwise. Adapting this logic into state/getters for Vuex follows similar principles.

Storing data as arrays is more manageable than using objects. In cases where you need to work with objects, tools like lodash can assist in sorting without significant complications.

Perhaps this solution could be helpful. Without knowing the full structure of your project, I have attempted to recreate it here using one possible approach.

Your project includes a state that consists of worms and measurements lists. Each individual worm has a list of indexes for measurements, which are presumably associated with the main measurements list.

The state should be defined within the Vuex store. In this case, your store will contain four key elements: state, getters, actions, and mutations.

The state essentially serves as the single source of truth for the entire application. The next question is: how can components and routes access the data stored in our state? Well, the getters play a crucial role by retrieving data from the store and providing it to the components. Specifically, we are interested in fetching the sortedByTSDec and sortedByTSAsc methods.

Having understood how to retrieve data from the state, let's explore how to set data into the state. While one might expect to define setters, in Vuex these are referred to as mutations. By defining a mutation, you can effectively update the data in the state.

Additionally, actions in Vuex are similar to mutations, but they do not directly modify the state; instead, they trigger mutations. Think of actions as asynchronous functions and mutations as synchronous ones.

For instance, the generateData action might be responsible for retrieving data, possibly from an external server or database, and then calling the populate mutation to update the state.

What about the Worn class?

This is where things get interesting. Using the Vue.extend() method enables the creation of a subclass of the base Vue constructor. Why? Because this subclass includes a data option. When the populate mutation assigns the generated data to a new instance of Worn, the state.worms ends up containing a collection of Worn objects.

In addition, computed properties are declared to calculate values such as longestLength and timestampForLongest based on the data available within each instance.

To sort the list of worms according to the timestamp of their longest length, you would first find the longest lengths and then utilize the .sort() method along with a custom compare function to achieve the desired order.

A basic snippet illustrating this process: