On saving data in Vue state, nodes' are flying in air (Not connected with edges)

[Nehasoni988]

The data which is in file "map.js", I put that in-state, and after on first time reload its working fine, but on second-time page reload when I am dragging the nodes they are flying in the air not dragging with the edges.

Below is my code snippet-
Module (mindmap.js)-

function initialState() {
    return {
      nodes: [
        {
          'text': 'Python library',
          'url': '',
          'fx': -13,
          'fy': -390,
          'nodes': []
        },
        {
          'text': 'Menu Section',
          'url': '',
          'fx': -13,
          'fy': -250,
          'nodes': []
        },
        {
          'text': 'basics',
          'url': '',
          'fx': 96,
          'fy': -300,
          'nodes': []
        }
      ],
      connections : [
        {
          'source': 'Python library',
          'target': 'basics',
          'curve': {
            'x': -43.5535,
            'y': 299.545
          }
        },
        {
          'source': 'Python library',
          'target': 'Menu Section',
          'curve': {
            'x': -78.1206,
            'y': -114.714
          }
        },
      ]
    }
}

In Vue component (MindMap.vue), I am taking data from the state using computed property-

<template>
  <div>
    <div align="center">
      <v-row no-gutters>
        <v-col sm="6">
          <mindmap
            :nodes="nodes"
            :connections="connections"
            :editable="true"
          />
        </v-col>
      </v-row>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  name: 'MindMap',

  computed:{
    ...mapState({
      nodes:state => state.mindmap.nodes,
      connections:state => state.mindmap.connections
    })
  },
}
</script>

Here is the behavior this code is performing-

GIF