Vue.jsでaxiosを使ってphpからJsonでデータを受取りDATAプロパティに格納したい

Question

前提・実現したいこと

Vue.jsの学習のためにシンプルなニュースアプリをローカルで作っています。
（プログラミングを独学している初心者です）

Vue.jsでaxiosを使ってphpからデータを受取り、
Vue.jsのdataプロパティに値を格納する所で苦戦しています。

発生している問題・エラーメッセージ

phpでは、DBから連想配列の形でデータを取り出し、
それをjson_encodeしてreturnしています。

僕の理解だと、このphpファイルにVue.jsからaxiosでアクセスして、
レスポンスされたデータをJSON.parseで変換すれば、
Vue.jsのDATAプロパティに格納できる...と考えているのですが、JSON.parse時に下記のエラーがでます。

SyntaxError: Unexpected token s in JSON at position 0
    at JSON.parse (<anonymous>)
    at app.js:14

該当のソースコード

let url = 'http://localhost/kaigaigumi/mysql.php';

var app = new Vue({
    el:'#app',
    data: {
        posts:[],
    },
    mounted() {
        this.getDatas();
    },
    methods:{
        getDatas(){
            axios.get(url).then((response) => {
                this.posts = JSON.parse(response.data);
                console.log(this.posts);
            }).catch((error) => {
                console.log(error);
            });
        }
    }
})

header('Access-Control-Allow-Origin: *');

try {
    $pdo = new PDO('mysql:host=127.0.0.1;dbname=dbbame;charset=utf8','root','root',
    array(PDO::ATTR_EMULATE_PREPARES => false));
    } catch (PDOException $e) {
     exit('データベース接続失敗。'.$e->getMessage());
    }

$sql = "SELECT * FROM news ORDER BY published DESC LIMIT 4";

$prepare = $pdo->prepare($sql);

$prepare->execute();

$results = $prepare->fetchAll(PDO::FETCH_ASSOC);

$results = json_encode($results,JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT);

var_dump($results);

return $results;

phpの方でreturnしている値は下記のような内容になっています。

string(1714) "[
    {
        "id": 68,
        "title": "久保建英に大きく立ち塞がる“ファミリー”の壁 - スペイン発サッカー紀行 - 海外サッカーコラム - 日刊スポーツ",
        "published": "Wed, 30 Oct 2019 07:00:00 GMT",
        "image": "https://www.nikkansports.com/soccer/world/column/fromspain/news/img/201910300000299-w500_0.jpg",
        "link": "https://www.nikkansports.com/soccer/world/column/fromspain/news/201910300000299.html"
    },
    {
        "id": 54,
        "title": "久保建英の現状は「かわいそう」。後輩を慮りつつ充実の香川真司。（工藤拓） - Number Web",
        "published": "Wed, 29 Jan 2020 08:00:00 GMT",
        "image": "https://number.ismcdn.jp/mwimgs/d/5/-/img_d599ef67a62c1df8f98e5e1bf104da45180831.jpg",
        "link": "https://number.bunshun.jp/articles/-/842324"
    },
    {
        "id": 64,
        "title": "「18歳に見えない」久保建英、マジョルカ移籍はバルサ時代のコーチが影響? - ゲキサカ",
        "published": "Wed, 28 Aug 2019 07:00:00 GMT",
        "image": "https://f.image.geki.jp/data/image/news/2560/284000/283400/news_283400_1.jpg",
        "link": "https://web.gekisaka.jp/news/detail/?283400-283400-fl"
    },
    {
        "id": 44,
        "title": "久保建英がバルサを選ばなかった理由。世界一の育成組織がグラグラだ - Sportiva",
        "published": "Wed, 26 Jun 2019 07:00:00 GMT",
        "image": "https://sportiva.shueisha.co.jp/clm/football/wfootball/2019/assets_c/2019/06/kubotakehusa20190625-thumb-600x400-220215.jpg",
        "link": "https://sportiva.shueisha.co.jp/clm/football/wfootball/2019/06/26/post_64/"
    }
]"

試したこと

エラーでググると変換できない値が入ってる可能性があるとのことだったで、
試しにphpからreturnする値を下記くらいにシンプルなものにしてみました。

{"value1":1,"value2":2,"value3":3,"value4":4,"value5":5}

しかし、エラー内容は全く同じものが表示されました。

ということは、returnしている値の中に原因があるのではなく、
ここまでの手順の中で何か足りていない処理などがあるのでしょうか？？

ここからの切り分け方針の判断もつかず困っています。

どうにかphpから受け取った値をVue.jsのDATAプロパティに格納して使いたいです。

知識ある方アドバイスお願いします><

補足情報（FW/ツールのバージョンなど）

PHP 7.4.3
Vue.js v2.6.11

Answer 1

自己解決しました！

phpから値を返す時にreturnじゃなくてechoで返せばできました。（JSON.parse不要）