Vue Js Get nth item/element of array

<!DOCTYPE html>
<html lang="en">

<body>
  <div id="app">
    <h3>Vue Js get nth element/item from array</h3>
    <p>The nth item of the array is: {{ getNthItem(2) }}</p>
  </div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data() {
        return {
          myArray: ['Vue', 'React', 'Angular', 'Node']
        };
      },
      methods: {
        getNthItem(n) {
          if (n >= 0 && n < this.myArray.length) {
            return this.myArray[n];
          } else {
            return 'Invalid index';
          }
        }
      }
    });
  </script>
  <style scoped>
    /* CSS styles for the #app container */
    #app {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f5f5f5;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

/* CSS styles for the <h3> heading */
    #app h3 {
      color: #333;
      font-size: 24px;
      margin-bottom: 10px;
    }

/* CSS styles for the <p> paragraph */
    #app p {
      font-size: 18px;
      margin-bottom: 10px;
      color: #555;
    }
  </style>

</body>

</html>