Strapi plugin: Work with dynamic zones and components

## Summary

In Strapi 3.0.0 beta 18 they have included a couple of new features: dynamic zones and components: https://strapi.io/blog/release-beta-18-dynamic-zones

At the moment the Gridsome plugin doesn't know that each component should be its own collection type and for that collection to be referenced from the dynamic zones field. Instead it appends each component as a normal field.

### Basic example

A basic example is to create a simple strapi content type with a dynamic zone and two components to be used within that zone. Then create a new piece of content for this content type. This would output something like the following from the API:

```
[
{
"id": 1,
"title": "Test basic page",
"created_at": "2019-12-21T10:55:47.358Z",
"updated_at": "2019-12-21T10:55:47.358Z",
"content_area": [
{
"__component": "building-blocks.text-only",
"id": 2,
"text": "Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.\n\nCurabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.\n\nCras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue."
},
{
"__component": "building-blocks.image-with-text",
"id": 4,
"text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.",
"image": {
"id": 4,
"name": "Barometer landing page.png",
"hash": "c62331e63e604ba2a8eccea290734d96",
"sha256": "4We7xOgRCv8w-XmFCDOSn4OthyQiJPxBFIJhP-8yCQk",
"ext": ".png",
"mime": "image/png",
"size": 3661.88,
"url": "/uploads/c62331e63e604ba2a8eccea290734d96.png",
"provider": "local",
"provider_metadata": null,
"created_at": "2019-12-21T10:55:47.429Z",
"updated_at": "2019-12-21T10:55:47.429Z"
}
}
]
}
]
```
In my example above the `content_area` field is my 'dynamic zone' and the two array items below it are an instance of two different components.

Then fire up Gridsome graphql explorer and examine the collection.

### Motivation

The dynamic zones and components update opens up a massive amount of flexibility in Strapi where content editors can construct complex sets of data from pre-defined 'building blocks' or components. This is turn would allow Gridsome to present this structured data, for example as a blog post, with the content being made up of various components.

Start by examining the Gridsome Strapi plugin's handling of the API response and the generated collection in the GraphQL explorer. Use the dynamic-zone example as the expected data shape, and verify that each component becomes its own collection type and that the dynamic-zone field references those component collections, including nested fields such as the image.

Written by the indexing model from the issue text.