Edit 1: I have added a codepen

CodePudding user response：

I've looked at your codepen. I found out that the problem is linked with the use of PascalCase (camelCase as well) for header values. Although it works for displaying the data, you can't access the named slot in DOM template, since the browser will interpret any upper case symbol as lowercase. See this GitHub bug report and the Vue documentation page, with hints on this problem.

There are two solutions proposed: the first is obvious - convert all headers' value key to lowercase. Second, use string templates with which I'm not very familiar.