title: Generating arrays in vuex
body: <p>I started learning vuex a week ago and I tried to generate something that look like that:</p>
  <pre><code>[
    { isClicked: false, toPlayer: null, cellID: 1 },
    { isClicked: false, toPlayer: null, cellID: 2 },
    { isClicked: false, toPlayer: null, cellID: 3 },
  ]
  </code></pre>
  <p>I used the <em>Array()</em> constructor to create an empty array of size 3 then tried to fill it using both forEach and <em>Array.fill()</em> but when i try to change any element inside the object the crossponding elements inside the array also changes and the value of <em>cellID</em> is set to the last value assigned to any other <em>cellID</em>.</p>
  <p>example:</p>
  <pre><code>arr[0][0] = true
  [
    { isClicked: true, toPlayer: null, cellID: 3 },
    { isClicked: true, toPlayer: null, cellID: 3 },
    { isClicked: true, toPlayer: null, cellID: 3 },
  ]
  </code></pre>
  <ul>
  <li>I tried hardcoding the array and it worked just fine.</li>
  <li>So how can I generate such an array? and what is causing this to
  happen?</li>
  </ul>
  <p>Code for generation:</p>
  <pre><code>const createGameBoard = () =&gt; {
    let row = Array(3);
    const cellDS = {
      isClcicked: false,
      toPlayer: null,
      cellID: null,
    };
    row.fill(cellDS)
    let gameBoard = Array(3)
    gameBoard.fill(row)
    return gameBoard
  };
  </code></pre>