vue API取得の方法

実現したいこと：
VueでAPIを非同期通信で渡したい。

現在：
APIの情報が取得できていない。
変数(results) にAPIの情報を格納しようとしているが、undifinedとなってしまう

サイトを使って調べたりしたのですが、何が原因かがわからなかったので質問しました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>
</head>
<body>
  <div id="app1">
    <ol>
      <li v-for="result in results">{{ result }}</li>
  </ol>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://www.promisejs.org/polyfills/promise-7.0.4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
  <script type="text/javascript" src="../js/test_api.js"></script>
</body>
</html>


    var app = new Vue({
      el: '#app1',
      data: {
          results: []
      },
      mounted: function() {
        var self = this;
        axios
          .get("http://localhost/test/restaurant_list.php")
          .then(function(response) {
            self.results = response.data.results;
          })
          .catch(function(error) {
            console.log('取得に失敗しました。', error);
          })
      }
    })

<?php
    header("Access-Control-Allow-Origin: *");
    try{
      $pdo = new PDO(
        "mysql:dbname=prolab_sql_task;host=localhost;charset=utf8mb4",
        "root",
        "root",
        [
          PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
          PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
        ]
      );
      $sql = "SELECT * FROM restaurant_list.restaurant_into";
      $stmt = $pdo->prepare($sql);
      $stmt->execute();
      $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
      echo json_encode($data);

    }catch(PDOException $e) {
      //エラー発生時
      echo $e->getMessage();
      exit;
    }
?>