Vue.js shared state

Like in the previous example, two Vue.js components are instantiated, each one displaying a different matrix of numbers. In this example, the two views have a notion of shared selection (the orange square). You can click another square to change the selection in both views.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue.js Shared State</title>
  <link type="text/css" href="index.css" rel="stylesheet"/>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  
  <div id="app">
    <matrix
      :data="matrix1"
      v-model="shared_sel"
      :cellsize="60"
    />
    <matrix
      :data="matrix2"
      v-model="shared_sel"
      :cellsize="40"
      :padding="2"
    />
  </div>
  
  <script src="index.js"></script>
</body>
</html>
    

https://d3js.org/d3.v4.min.js

https://unpkg.com/vue/dist/vue.js